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HTML Tutorial
HTML

HTML is the standard markup language for Web pages.

With HTML you can create your own Website.

HTML is easy to learn - You will enjoy it!

Easy Learning with HTML "Try it Yourself"
With our "Try it Yourself" editor, you can edit the HTML code and view the result:

Example
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>

</body>
</html>
Click on the "Try it Yourself" button to see how it works.

HTML Examples
In this HTML tutorial, you will find more than 200 examples. With our online "Try it Yourself" editor, you can edit and test each example yourself!

Go to HTML Examples!

HTML Exercises
This HTML tutorial also contains nearly 100 HTML exercises.

Test Yourself With Exercises
Exercise:
Add a "tooltip" to the paragraph below with the text "About W3Schools".

<p 
="About W3Schools">W3Schools is a web developer's site.</p>

Start the Exercise

HTML Quiz Test
Test your HTML skills with our HTML Quiz!


HTML References
At W3Schools you will find complete references about HTML elements, attributes, events, color names, entities, character-sets, URL encoding, language codes, HTTP messages, browser support, and more:

HTML ElementsBrowser SupportAttributesGlobal AttributesEvent AttributesColor NamesCanvasAudio/Video DOMCharacter SetsURL EncodingLanguage CodesCountry CodesHTTP MessagesPx to Em ConverterKeyboard Shortcuts
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HTML Introduction
HTML is the standard markup language for creating Web pages.

What is HTML?
HTML stands for Hyper Text Markup Language
HTML is the standard markup language for creating Web pages
HTML describes the structure of a Web page
HTML consists of a series of elements
HTML elements tell the browser how to display the content
HTML elements label pieces of content such as "this is a heading", "this is a paragraph", "this is a link", etc.
A Simple HTML Document
Example
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>
https://www.w3schools.com/html/tryit.asp?filename=tryhtml_intro

Example Explained
The <!DOCTYPE html> declaration defines that this document is an HTML5 document
The <html> element is the root element of an HTML page
The <head> element contains meta information about the HTML page
The <title> element specifies a title for the HTML page (which is shown in the browser's title bar or in the page's tab)
The <body> element defines the document's body, and is a container for all the visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
The <h1> element defines a large heading
The <p> element defines a paragraph
What is an HTML Element?
An HTML element is defined by a start tag, some content, and an end tag:

<tagname>Content goes here...</tagname>
The HTML element is everything from the start tag to the end tag:

<h1>My First Heading</h1>
<p>My first paragraph.</p>
Start tag	Element content	End tag
<h1>	My First Heading	</h1>
<p>	My first paragraph.	</p>
<br>	none	none
Note: Some HTML elements have no content (like the <br> element). These elements are called empty elements. Empty elements do not have an end tag!


Web Browsers
The purpose of a web browser (Chrome, Edge, Firefox, Safari) is to read HTML documents and display them correctly.

A browser does not display the HTML tags, but uses them to determine how to display the document:

View in Browser

HTML Page Structure
Below is a visualization of an HTML page structure:

<html>
<head>
<title>Page title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
Note: The content inside the <body> section (the white area above) will be displayed in a browser. The content inside the <title> element will be shown in the browser's title bar or in the page's tab.

HTML History
Since the early days of the World Wide Web, there have been many versions of HTML:

Year	Version
1989	Tim Berners-Lee invented www
1991	Tim Berners-Lee invented HTML
1993	Dave Raggett drafted HTML+
1995	HTML Working Group defined HTML 2.0
1997	W3C Recommendation: HTML 3.2
1999	W3C Recommendation: HTML 4.01
2000	W3C Recommendation: XHTML 1.0
2008	WHATWG HTML5 First Public Draft
2012	WHATWG HTML5 Living Standard
2014	W3C Recommendation: HTML5
2016	W3C Candidate Recommendation: HTML 5.1
2017	W3C Recommendation: HTML5.1 2nd Edition
2017	W3C Recommendation: HTML5.2
This tutorial follows the latest HTML5 standard.
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A simple text editor is all you need to learn HTML.

Learn HTML Using Notepad or TextEdit
Web pages can be created and modified by using professional HTML editors.

However, for learning HTML we recommend a simple text editor like Notepad (PC) or TextEdit (Mac).

We believe in that using a simple text editor is a good way to learn HTML.

Follow the steps below to create your first web page with Notepad or TextEdit.

Step 1: Open Notepad (PC)
Windows 8 or later:

Open the Start Screen (the window symbol at the bottom left on your screen). Type Notepad.

Windows 7 or earlier:

Open Start > Programs > Accessories > Notepad

Step 1: Open TextEdit (Mac)
Open Finder > Applications > TextEdit

Also change some preferences to get the application to save files correctly. In Preferences > Format > choose "Plain Text"

Then under "Open and Save", check the box that says "Display HTML files as HTML code instead of formatted text".

Then open a new document to place the code.

Step 2: Write Some HTML
Write or copy the following HTML code into Notepad:

<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>
Notepad


Step 3: Save the HTML Page
Save the file on your computer. Select File > Save as in the Notepad menu.

Name the file "index.htm" and set the encoding to UTF-8 (which is the preferred encoding for HTML files).

View in Browser

Tip: You can use either .htm or .html as file extension. There is no difference, it is up to you.

Step 4: View the HTML Page in Your Browser
Open the saved HTML file in your favorite browser (double click on the file, or right-click - and choose "Open with").

The result will look much like this:

View in Browser

W3Schools Online Editor - "Try it Yourself"
With our free online editor, you can edit the HTML code and view the result in your browser.

It is the perfect tool when you want to test code fast. It also has color coding and the ability to save and share code with others:

Example
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

https://www.w3schools.com/html/tryit.asp?filename=tryhtml_default

Click on the "Try it Yourself" button to see how it works.












aaaaaaaaaaaaaaaaaaaaaaaaaaa

https://www.w3schools.com/html/html_basic.asp





In this chapter we will show some basic HTML examples.

Don't worry if we use tags you have not learned about yet.

HTML Documents
All HTML documents must start with a document type declaration: <!DOCTYPE html>.

The HTML document itself begins with <html> and ends with </html>.

The visible part of the HTML document is between <body> and </body>.

Example
<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>

https://www.w3schools.com/html/tryit.asp?filename=tryhtml_basic_document

The <!DOCTYPE> Declaration
The <!DOCTYPE> declaration represents the document type, and helps browsers to display web pages correctly.

It must only appear once, at the top of the page (before any HTML tags).

The <!DOCTYPE> declaration is not case sensitive.

The <!DOCTYPE> declaration for HTML5 is:

<!DOCTYPE html>
HTML Headings
HTML headings are defined with the <h1> to <h6> tags.

<h1> defines the most important heading. <h6> defines the least important heading: 

Example
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>

HTML Paragraphs
HTML paragraphs are defined with the <p> tag:

https://www.w3schools.com/html/tryit.asp?filename=tryhtml_basic_headings

Example
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

https://www.w3schools.com/html/tryit.asp?filename=tryhtml_basic_paragraphs

HTML Links
HTML links are defined with the <a> tag:

Example
<a href="https://www.w3schools.com">This is a link</a>

https://www.w3schools.com/html/tryit.asp?filename=tryhtml_basic_link


The link's destination is specified in the href attribute. 

Attributes are used to provide additional information about HTML elements.

You will learn more about attributes in a later chapter.

HTML Images
HTML images are defined with the <img> tag.


https://www.w3schools.com/html/tryit.asp?filename=tryhtml_basic_img


The source file (src), alternative text (alt), width, and height are provided as attributes:

Example
<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">
How to View HTML Source?
Have you ever seen a Web page and wondered "Hey! How did they do that?"

View HTML Source Code:
Right-click in an HTML page and select "View Page Source" (in Chrome) or "View Source" (in Edge), or similar in other browsers. This will open a window containing the HTML source code of the page.

Inspect an HTML Element:
Right-click on an element (or a blank area), and choose "Inspect" or "Inspect Element" to see what elements are made up of (you will see both the HTML and the CSS). You can also edit the HTML or CSS on-the-fly in the Elements or Styles panel that opens.
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An HTML element is defined by a start tag, some content, and an end tag.

HTML Elements
An HTML element is defined by a start tag, some content, and an end tag:

<tagname>Content goes here...</tagname>
The HTML element is everything from the start tag to the end tag:

<h1>My First Heading</h1>
<p>My first paragraph.</p>
Start tag	Element content	End tag
<h1>	My First Heading	</h1>
<p>	My first paragraph.	</p>
<br>	none	none
Note: Some HTML elements have no content (like the <br> element). These elements are called empty elements. Empty elements do not have an end tag!

Nested HTML Elements
HTML elements can be nested (this means that elements can contain other elements).

All HTML documents consist of nested HTML elements.

The following example contains four HTML elements (<html>, <body>, <h1> and <p>):

Example
<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>
Example Explained
The <html> element is the root element and it defines the whole HTML document.

It has a start tag <html> and an end tag </html>.

Then, inside the <html> element there is a <body> element:

<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
The <body> element defines the document's body.

It has a start tag <body> and an end tag </body>.

Then, inside the <body> element there are two other elements: <h1> and <p>:

<h1>My First Heading</h1>
<p>My first paragraph.</p>
The <h1> element defines a heading.

It has a start tag <h1> and an end tag </h1>:

<h1>My First Heading</h1>
The <p> element defines a paragraph.

It has a start tag <p> and an end tag </p>:

<p>My first paragraph.</p>

Never Skip the End Tag
Some HTML elements will display correctly, even if you forget the end tag:

Example
<html>
<body>

<p>This is a paragraph
<p>This is a paragraph

</body>
</html>
However, never rely on this! Unexpected results and errors may occur if you forget the end tag!

Empty HTML Elements
HTML elements with no content are called empty elements.

The <br> tag defines a line break, and is an empty element without a closing tag:

Example
<p>This is a <br> paragraph with a line break.</p>
HTML is Not Case Sensitive
HTML tags are not case sensitive: <P> means the same as <p>.

The HTML standard does not require lowercase tags, but W3C recommends lowercase in HTML, and demands lowercase for stricter document types like XHTML.

At W3Schools we always use lowercase tag names.

HTML Tag Reference
W3Schools' tag reference contains additional information about these tags and their attributes.

Tag	Description
<html>	Defines the root of an HTML document
<body>	Defines the document's body
<h1> to <h6>	Defines HTML headings
For a complete list of all available HTML tags, visit our HTML Tag Reference.
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<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>
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<!DOCTYPE html>
<html>
<body> 

<p>This is a paragraph.
<p>This is a paragraph.

</body>
</html>
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<!DOCTYPE html>
<html>
<body> 

<p>This is a <br> paragraph with a line break.</p>

</body>
</html>
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HTML Attributes
HTML attributes provide additional information about HTML elements.

HTML Attributes
All HTML elements can have attributes
Attributes provide additional information about elements
Attributes are always specified in the start tag
Attributes usually come in name/value pairs like: name="value"
The href Attribute
The <a> tag defines a hyperlink. The href attribute specifies the URL of the page the link goes to:

Example
<a href="https://www.w3schools.com">Visit W3Schools</a>
You will learn more about links in our HTML Links chapter.

The src Attribute
The <img> tag is used to embed an image in an HTML page. The src attribute specifies the path to the image to be displayed:

Example
<img src="img_girl.jpg">
There are two ways to specify the URL in the src attribute:

1. Absolute URL - Links to an external image that is hosted on another website. Example: src="https://www.w3schools.com/images/img_girl.jpg".

Notes: External images might be under copyright. If you do not get permission to use it, you may be in violation of copyright laws. In addition, you cannot control external images; it can suddenly be removed or changed.

2. Relative URL - Links to an image that is hosted within the website. Here, the URL does not include the domain name. If the URL begins without a slash, it will be relative to the current page. Example: src="img_girl.jpg". If the URL begins with a slash, it will be relative to the domain. Example: src="/images/img_girl.jpg".

Tip: It is almost always best to use relative URLs. They will not break if you change domain.

The width and height Attributes
The <img> tag should also contain the width and height attributes, which specifies the width and height of the image (in pixels):

Example
<img src="img_girl.jpg" width="500" height="600">
The alt Attribute
The required alt attribute for the <img> tag specifies an alternate text for an image, if the image for some reason cannot be displayed. This can be due to slow connection, or an error in the src attribute, or if the user uses a screen reader.

Example
<img src="img_girl.jpg" alt="Girl with a jacket">
Example
See what happens if we try to display an image that does not exist:

<img src="img_typo.jpg" alt="Girl with a jacket">
You will learn more about images in our HTML Images chapter.


The style Attribute
The style attribute is used to add styles to an element, such as color, font, size, and more.

Example
<p style="color:red;">This is a red paragraph.</p>
You will learn more about styles in our HTML Styles chapter.

The lang Attribute
You should always include the lang attribute inside the <html> tag, to declare the language of the Web page. This is meant to assist search engines and browsers.

The following example specifies English as the language:

<!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>
Country codes can also be added to the language code in the lang attribute. So, the first two characters define the language of the HTML page, and the last two characters define the country.

The following example specifies English as the language and United States as the country:

<!DOCTYPE html>
<html lang="en-US">
<body>
...
</body>
</html>
You can see all the language codes in our HTML Language Code Reference.

The title Attribute
The title attribute defines some extra information about an element.

The value of the title attribute will be displayed as a tooltip when you mouse over the element:

Example
<p title="I'm a tooltip">This is a paragraph.</p>
We Suggest: Always Use Lowercase Attributes
The HTML standard does not require lowercase attribute names.

The title attribute (and all other attributes) can be written with uppercase or lowercase like title or TITLE.

However, W3C recommends lowercase attributes in HTML, and demands lowercase attributes for stricter document types like XHTML.

At W3Schools we always use lowercase attribute names.

We Suggest: Always Quote Attribute Values
The HTML standard does not require quotes around attribute values.

However, W3C recommends quotes in HTML, and demands quotes for stricter document types like XHTML.

Good:
<a href="https://www.w3schools.com/html/">Visit our HTML tutorial</a>
Bad:
<a href=https://www.w3schools.com/html/>Visit our HTML tutorial</a>
Sometimes you have to use quotes. This example will not display the title attribute correctly, because it contains a space:

Example
<p title=About W3Schools>
 At W3Schools we always use quotes around attribute values.

Single or Double Quotes?
Double quotes around attribute values are the most common in HTML, but single quotes can also be used.

In some situations, when the attribute value itself contains double quotes, it is necessary to use single quotes:

<p title='John "ShotGun" Nelson'>
Or vice versa:

<p title="John 'ShotGun' Nelson">
Chapter Summary
All HTML elements can have attributes
The href attribute of <a> specifies the URL of the page the link goes to
The src attribute of <img> specifies the path to the image to be displayed
The width and height attributes of <img> provide size information for images
The alt attribute of <img> provides an alternate text for an image
The style attribute is used to add styles to an element, such as color, font, size, and more
The lang attribute of the <html> tag declares the language of the Web page
The title attribute defines some extra information about an element
HTML Exercises
Test Yourself With Exercises
Exercise:
Add a "tooltip" to the paragraph below with the text "About W3Schools".

<p 
="About W3Schools">W3Schools is a web developer's site.</p>

Start the Exercise

HTML Attribute Reference
A complete list of all attributes for each HTML element, is listed in our: HTML Attribute Reference
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<!DOCTYPE html>
<html>
<body>

<h2>The href Attribute</h2>

<p>HTML links are defined with the a tag. The link address is specified in the href attribute:</p>

<a href="https://www.w3schools.com">Visit W3Schools</a>

</body>
</html>
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<!DOCTYPE html>
<html>
<body>

<h2>The src Attribute</h2>
<p>HTML images are defined with the img tag, and the filename of the image source is specified in the src attribute:</p>

<img src="img_girl.jpg" width="500" height="600">

</body>
</html>

aaaaaaaaaaaaaa


<!DOCTYPE html>
<html>
<body>

<h2>Width and Height Attributes</h2>

<p>The width and height attributes of the img tag, defines the width and height of the image:</p>

<img src="img_girl.jpg" width="500" height="600">

</body>
</html>
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<!DOCTYPE html>
<html>
<body>

<h2>The alt Attribute</h2>
<p>The alt attribute should reflect the image content, so users who cannot see the image gets an understanding of what the image contains:</p>

<img src="img_girl.jpg" alt="Girl with a jacket" width="500" height="600">

</body>
</html>
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<!DOCTYPE html>
<html>
<body>

<img src="img_typo.jpg" alt="Girl with a jacket">

<p>If we try to display an image that does not exist, the value of the alt attribute will be displayed instead. </p>

</body>
</html>
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<!DOCTYPE html>
<html>
<body>

<h2>The style Attribute</h2>
<p>The style attribute is used to add styles to an element, such as color:</p>

<p style="color:red;">This is a red paragraph.</p>

</body>
</html>
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<!DOCTYPE html>
<html>
<body>

<h2 title="I'm a header">The title Attribute</h2>

<p title="I'm a tooltip">Mouse over this paragraph, to display the title attribute as a tooltip.</p>

</body>
</html>
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<!DOCTYPE html>
<html>
<body>

<h1>About W3Schools</h1>

<p title=About W3Schools>
You cannot omit quotes around an attribute value 
if the value contains spaces.
</p>

<p><b>
If you move the mouse over the paragraph above,
your browser will only display the first word from the title.
</b></p>

</body>
</html>
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<!DOCTYPE html>
<html>
<body>

<h2>Single or Double Quotes?</h2>
<p>In some situations, when the attribute value itself contains double quotes, it is necessary to use single quotes:</p>
<p>Move your mouse over the paragraphs below to see the effect:</p>

<p title='John "ShotGun" Nelson'>John with double quotes</p>
<p title="John 'ShotGun' Nelson">John with single quotes</p>

</body>
</html>
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HTML Headings
HTML headings are titles or subtitles that you want to display on a webpage.

Example
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
HTML Headings
HTML headings are defined with the <h1> to <h6> tags.

<h1> defines the most important heading. <h6> defines the least important heading.

Example
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
Note: Browsers automatically add some white space (a margin) before and after a heading.

Headings Are Important
Search engines use the headings to index the structure and content of your web pages.

Users often skim a page by its headings. It is important to use headings to show the document structure.

<h1> headings should be used for main headings, followed by <h2> headings, then the less important <h3>, and so on.

Note: Use HTML headings for headings only. Don't use headings to make text BIG or bold.

Bigger Headings
Each HTML heading has a default size. However, you can specify the size for any heading with the style attribute, using the CSS font-size property:

Example
<h1 style="font-size:60px;">Heading 1</h1>
ADVERTISEMENT


HTML Exercises
Test Yourself With Exercises
Exercise:
Use the correct HTML tag to add a heading with the text "London".



<p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>

Start the Exercise

HTML Tag Reference
W3Schools' tag reference contains additional information about these tags and their attributes.

Tag	Description
<html>	Defines the root of an HTML document
<body>	Defines the document's body
<h1> to <h6>	Defines HTML headings
For a complete list of all available HTML tags, visit o
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<!DOCTYPE html>
<html>
<body>

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

</body>
</html>
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<!DOCTYPE html>
<html>
<body>

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

</body>
</html>
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<!DOCTYPE html>
<html>
<body>

<h1 style="font-size:60px;">Heading 1</h1>

<p>You can change the size of a heading with the style attribute, using the font-size property.</p>

</body>
</html>


aaaaaaaa
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HTML Paragraphs
A paragraph always starts on a new line, and is usually a block of text.

HTML Paragraphs
The HTML <p> element defines a paragraph.

A paragraph always starts on a new line, and browsers automatically add some white space (a margin) before and after a paragraph.

Example
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
HTML Display
You cannot be sure how HTML will be displayed.

Large or small screens, and resized windows will create different results.

With HTML, you cannot change the display by adding extra spaces or extra lines in your HTML code.

The browser will automatically remove any extra spaces and lines when the page is displayed:

Example
<p>
This paragraph
contains a lot of lines
in the source code,
but the browser
ignores it.
</p>

<p>
This paragraph
contains         a lot of spaces
in the source         code,
but the        browser
ignores it.
</p>
ADVERTISEMENT


HTML Horizontal Rules
The <hr> tag defines a thematic break in an HTML page, and is most often displayed as a horizontal rule.

The <hr> element is used to separate content (or define a change) in an HTML page:

Example
<h1>This is heading 1</h1>
<p>This is some text.</p>
<hr>
<h2>This is heading 2</h2>
<p>This is some other text.</p>
<hr>
The <hr> tag is an empty tag, which means that it has no end tag.

HTML Line Breaks
The HTML <br> element defines a line break.

Use <br> if you want a line break (a new line) without starting a new paragraph:

Example
<p>This is<br>a paragraph<br>with line breaks.</p>
The <br> tag is an empty tag, which means that it has no end tag.

The Poem Problem
This poem will display on a single line:

Example
<p>
  My Bonnie lies over the ocean.

  My Bonnie lies over the sea.

  My Bonnie lies over the ocean.

  Oh, bring back my Bonnie to me.
</p>
Solution - The HTML <pre> Element
The HTML <pre> element defines preformatted text.

The text inside a <pre> element is displayed in a fixed-width font (usually Courier), and it preserves both spaces and line breaks:

Example
<pre>
  My Bonnie lies over the ocean.

  My Bonnie lies over the sea.

  My Bonnie lies over the ocean.

  Oh, bring back my Bonnie to me.
</pre>
HTML Exercises
Test Yourself With Exercises
Exercise:
Use the correct HTML tag to add a paragraph with the text "Hello World!".

<html>
<body>

</body>
</html>

Start the Exercise

HTML Tag Reference
W3Schools' tag reference contains additional information about HTML elements and their attributes.

Tag	Description
<p>	Defines a paragraph
<hr>	Defines a thematic change in the content
<br>	Inserts a single line break
<pre>	Defines pre-formatted text
For a complete list of all available HTML tags, visit our HTML Tag Reference.





aaaaa


<!DOCTYPE html>
<html>
<body>

<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>

</body>
</html>
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<!DOCTYPE html>
<html>
<body>

<p>
This paragraph
contains a lot of lines
in the source code,
but the browser 
ignores it.
</p>

<p>
This paragraph
contains      a lot of spaces
in the source     code,
but the    browser 
ignores it.
</p>

<p>
The number of lines in a paragraph depends on the size of the browser window. If you resize the browser window, the number of lines in this paragraph will change.
</p>

</body>
</html>
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<!DOCTYPE html>
<html>
<body>

<h1>This is heading 1</h1>
<p>This is some text.</p>
<hr>

<h2>This is heading 2</h2>
<p>This is some other text.</p>
<hr>

<h2>This is heading 2</h2>
<p>This is some other text.</p>

</body>
</html>




aaaa



<!DOCTYPE html>
<html>
<body>

<p>This is<br>a paragraph<br>with line breaks.</p>

</body>
</html>
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<!DOCTYPE html>
<html>
<body>

<p>In HTML, spaces and new lines are ignored:</p>

<p>

  My Bonnie lies over the ocean.

  My Bonnie lies over the sea.

  My Bonnie lies over the ocean.
  
  Oh, bring back my Bonnie to me.

</p>

</body>
</html>
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<!DOCTYPE html>
<html>
<body>

<p>The pre tag preserves both spaces and line breaks:</p>

<pre>
   My Bonnie lies over the ocean.

   My Bonnie lies over the sea.

   My Bonnie lies over the ocean.
   
   Oh, bring back my Bonnie to me.
</pre>

</body>
</html>
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HTML Styles
The HTML style attribute is used to add styles to an element, such as color, font, size, and more.

Example
I am Red

I am Blue

I am Big

The HTML Style Attribute
Setting the style of an HTML element, can be done with the style attribute.

The HTML style attribute has the following syntax:

<tagname style="property:value;">
The property is a CSS property. The value is a CSS value.

You will learn more about CSS later in this tutorial.

Background Color
The CSS background-color property defines the background color for an HTML element.

Example
Set the background color for a page to powderblue:

<body style="background-color:powderblue;">

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
Example
Set background color for two different elements:

<body>

<h1 style="background-color:powderblue;">This is a heading</h1>
<p style="background-color:tomato;">This is a paragraph.</p>

</body>
ADVERTISEMENT


Text Color
The CSS color property defines the text color for an HTML element:

Example
<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
Fonts
The CSS font-family property defines the font to be used for an HTML element:

Example
<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>
Text Size
The CSS font-size property defines the text size for an HTML element:

Example
<h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p>
Text Alignment
The CSS text-align property defines the horizontal text alignment for an HTML element:

Example
<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>
Chapter Summary
Use the style attribute for styling HTML elements
Use background-color for background color
Use color for text colors
Use font-family for text fonts
Use font-size for text sizes
Use text-align for text alignment
HTML Exercises
Test Yourself With Exercises
Exercise:
Use the correct HTML attribute, and CSS, to set the color of the paragraph to "blue".

<p 
="
;">This is a paragraph.</p>

Start the Exercise
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<!DOCTYPE html>
<html>
<body>

<p>I am normal</p>
<p style="color:red;">I am red</p>
<p style="color:blue;">I am blue</p>
<p style="font-size:50px;">I am big</p>

</body>
</html>
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<!DOCTYPE html>
<html>
<body style="background-color:powderblue;">

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>
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<!DOCTYPE html>
<html>
<body>

<h1 style="background-color:powderblue;">This is a heading</h1>
<p style="background-color:tomato;">This is a paragraph.</p>

</body>
</html>
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<!DOCTYPE html>
<html>
<body>

<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>

</body>
</html>




aaaaaaaaa



<!DOCTYPE html>
<html>
<body>

<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>

</body>
</html>
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<!DOCTYPE html>
<html>
<body>

<h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p>

</body>
</html>
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<!DOCTYPE html>
<html>
<body>

<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>

</body>
</html>
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HTML Text Formatting
HTML contains several elements for defining text with a special meaning.

Example
This text is bold

This text is italic

This is subscript and superscript

HTML Formatting Elements
Formatting elements were designed to display special types of text:

<b> - Bold text
<strong> - Important text
<i> - Italic text
<em> - Emphasized text
<mark> - Marked text
<small> - Smaller text
<del> - Deleted text
<ins> - Inserted text
<sub> - Subscript text
<sup> - Superscript text
HTML <b> and <strong> Elements
The HTML <b> element defines bold text, without any extra importance.

Example
<b>This text is bold</b>
The HTML <strong> element defines text with strong importance. The content inside is typically displayed in bold.

Example
<strong>This text is important!</strong>
ADVERTISEMENT


HTML <i> and <em> Elements
The HTML <i> element defines a part of text in an alternate voice or mood. The content inside is typically displayed in italic.

Tip: The <i> tag is often used to indicate a technical term, a phrase from another language, a thought, a ship name, etc.

Example
<i>This text is italic</i>
The HTML <em> element defines emphasized text. The content inside is typically displayed in italic.

Tip: A screen reader will pronounce the words in <em> with an emphasis, using verbal stress.

Example
<em>This text is emphasized</em>
HTML <small> Element
The HTML <small> element defines smaller text:

Example
<small>This is some smaller text.</small>
HTML <mark> Element
The HTML <mark> element defines text that should be marked or highlighted:

Example
<p>Do not forget to buy <mark>milk</mark> today.</p>
HTML <del> Element
The HTML <del> element defines text that has been deleted from a document. Browsers will usually strike a line through deleted text:

Example
<p>My favorite color is <del>blue</del> red.</p>
HTML <ins> Element
The HTML <ins> element defines a text that has been inserted into a document. Browsers will usually underline inserted text:

Example
<p>My favorite color is <del>blue</del> <ins>red</ins>.</p>
HTML <sub> Element
The HTML <sub> element defines subscript text. Subscript text appears half a character below the normal line, and is sometimes rendered in a smaller font. Subscript text can be used for chemical formulas, like H2O:

Example
<p>This is <sub>subscripted</sub> text.</p>
HTML <sup> Element
The HTML <sup> element defines superscript text. Superscript text appears half a character above the normal line, and is sometimes rendered in a smaller font. Superscript text can be used for footnotes, like WWW[1]:

Example
<p>This is <sup>superscripted</sup> text.</p>
HTML Exercises
Test Yourself With Exercises
Exercise:
Add extra importance to the word "degradation" in the paragraph below.

<p>
WWF's mission is to stop the 
degradation
 of our planet's natural environment.
</p>

Start the Exercise

HTML Text Formatting Elements
Tag	Description
<b>	Defines bold text
<em>	Defines emphasized text 
<i>	Defines a part of text in an alternate voice or mood
<small>	Defines smaller text
<strong>	Defines important text
<sub>	Defines subscripted text
<sup>	Defines superscripted text
<ins>	Defines inserted text
<del>	Defines deleted text
<mark>	Defines marked/highlighted text
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<!DOCTYPE html>
<html>
<body>

<p><b>This text is bold</b></p>
<p><i>This text is italic</i></p>
<p>This is<sub> subscript</sub> and <sup>superscript</sup></p>

</body>
</html>
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<!DOCTYPE html>
<html>
<body>

<p>This text is normal.</p>

<p><b>This text is bold.</b></p>

</body>
</html>
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<!DOCTYPE html>
<html>
<body>

<p>This text is normal.</p>

<p><strong>This text is important!</strong></p>

</body>
</html>
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<!DOCTYPE html>
<html>
<body>

<p>This text is normal.</p>

<p><i>This text is italic.</i></p>

</body>
</html>
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<!DOCTYPE html>
<html>
<body>

<p>This text is normal.</p>

<p><em>This text is emphasized.</em></p>

</body>
</html>
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<!DOCTYPE html>
<html>
<body>

<p>This is some normal text.</p>
<p><small>This is some smaller text.</small></p>

</body>
</html>
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<!DOCTYPE html>
<html>
<body>

<p>Do not forget to buy <mark>milk</mark> today.</p>

</body>
</html>
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<!DOCTYPE html>
<html>
<body>

<p>My favorite color is <del>blue</del> red.</p>

</body>
</html>
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<!DOCTYPE html>
<html>
<body>

<p>My favorite color is <del>blue</del> <ins>red</ins>.</p>

</body>
</html>
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<!DOCTYPE html>
<html>
<body>

<p>This is <sub>subscripted</sub> text.</p>

</body>
</html>
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<!DOCTYPE html>
<html>
<body>

<p>This is <sup>superscripted</sup> text.</p>

</body>
</html>
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HTML Quotation and Citation Elements
In this chapter we will go through the <blockquote>,<q>, <abbr>, <address>, <cite>, and <bdo> HTML elements.

Example
Here is a quote from WWF's website:

For nearly 60 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by more than one million members in the United States and close to five million globally.
HTML <blockquote> for Quotations
The HTML <blockquote> element defines a section that is quoted from another source.

Browsers usually indent <blockquote> elements.

Example
<p>Here is a quote from WWF's website:</p>
<blockquote cite="http://www.worldwildlife.org/who/index.html">
For 50 years, WWF has been protecting the future of nature.
The world's leading conservation organization,
WWF works in 100 countries and is supported by
1.2 million members in the United States and
close to 5 million globally.
</blockquote>
HTML <q> for Short Quotations
The HTML <q> tag defines a short quotation.

Browsers normally insert quotation marks around the quotation.

Example
<p>WWF's goal is to: <q>Build a future where people live in harmony with nature.</q></p>

HTML <abbr> for Abbreviations
The HTML <abbr> tag defines an abbreviation or an acronym, like "HTML", "CSS", "Mr.", "Dr.", "ASAP", "ATM".

Marking abbreviations can give useful information to browsers, translation systems and search-engines.

Tip: Use the global title attribute to show the description for the abbreviation/acronym when you mouse over the element. 

Example
<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>
HTML <address> for Contact Information
The HTML <address> tag defines the contact information for the author/owner of a document or an article.

The contact information can be an email address, URL, physical address, phone number, social media handle, etc.

The text in the <address> element usually renders in italic, and browsers will always add a line break before and after the <address> element.

Example
<address>
Written by John Doe.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>
HTML <cite> for Work Title
The HTML <cite> tag defines the title of a creative work (e.g. a book, a poem, a song, a movie, a painting, a sculpture, etc.).

Note: A person's name is not the title of a work.

The text in the <cite> element usually renders in italic.

Example
<p><cite>The Scream</cite> by Edvard Munch. Painted in 1893.</p>
HTML <bdo> for Bi-Directional Override
BDO stands for Bi-Directional Override.

The HTML <bdo> tag is used to override the current text direction:

Example
<bdo dir="rtl">This text will be written from right to left</bdo>
HTML Exercises
Test Yourself With Exercises
Exercise:
Use an HTML element to add quotation marks around the letters "cool".

<p>
I am so 
cool
.
</p>

Start the Exercise

HTML Quotation and Citation Elements
Tag	Description
<abbr>	Defines an abbreviation or acronym
<address>	Defines contact information for the author/owner of a document
<bdo>	Defines the text direction
<blockquote>	Defines a section that is quoted from another source
<cite>	Defines the title of a work
<q>	Defines a short inline quotation
For a complete list of all available HTML tags, visit our HTML Tag Reference
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<!DOCTYPE html>
<html>
<body>

<p>Here is a quote from WWF's website:</p>
<blockquote cite="http://www.worldwildlife.org/who/index.html">
For 50 years, WWF has been protecting the future of nature.
The world's leading conservation organization,
WWF works in 100 countries and is supported by
1.2 million members in the United States and
close to 5 million globally.
</blockquote>

</body>
</html>
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<!DOCTYPE html>
<html>
<body>

<p>Browsers usually indent blockquote elements.</p>

<blockquote cite="http://www.worldwildlife.org/who/index.html">
For nearly 60 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by more than one million members in the United States and close to five million globally.
</blockquote>

</body>
</html>
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<!DOCTYPE html>
<html>
<body>

<p>Browsers usually insert quotation marks around the q element.</p>

<p>WWF's goal is to: <q>Build a future where people live in harmony with nature.</q></p>

</body>
</html>
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<!DOCTYPE html>
<html>
<body>

<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>

<p>Marking up abbreviations can give useful information to browsers, translation systems and search-engines.</p>

</body>
</html>
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<!DOCTYPE html>
<html>
<body>

<p>The HTML address element defines contact information (author/owner) of a document or article.</p>

<address>
Written by John Doe.<br> 
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>

</body>
</html>
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<!DOCTYPE html>
<html>
<body>

<p>The HTML cite element defines the title of a work.</p>
<p>Browsers usually display cite elements in italic.</p>

<img src="img_the_scream.jpg" width="220" height="277" alt="The Scream">
<p><cite>The Scream</cite> by Edvard Munch. Painted in 1893.</p>

</body>
</html>
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<!DOCTYPE html>
<html>
<body>

<p>If your browser supports bi-directional override (bdo), the next line will be written from right to left (rtl):</p>

<bdo dir="rtl">This line will be written from right to left</bdo>

</body>
</html>




aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

https://www.w3schools.com/html/html_comments.asp



HTML Comments
HTML comments are not displayed in the browser, but they can help document your HTML source code.

HTML Comment Tags
You can add comments to your HTML source by using the following syntax:

<!-- Write your comments here -->
Notice that there is an exclamation point (!) in the start tag, but not in the end tag.

Note: Comments are not displayed by the browser, but they can help document your HTML source code.

With comments you can place notifications and reminders in your HTML code:

Example
<!-- This is a comment -->

<p>This is a paragraph.</p>

<!-- Remember to add more information here -->
Comments are also great for debugging HTML, because you can comment out HTML lines of code, one at a time, to search for errors:

Example
<!-- Do not display this image at the moment
<img border="0" src="pic_trulli.jpg" alt="Trulli">
-->
HTML Exercises
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<!DOCTYPE html>
<html>
<body>

<!-- This is a comment -->
<p>This is a paragraph.</p>
<!-- Comments are not displayed in the browser -->

</body>
</html>
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<!DOCTYPE html>
<html>
<body>

<!-- Do not display this at the moment
<img border="0" src="pic_trulli.jpg" alt="Trulli">
-->

</body>
</html>
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HTML Colors
HTML colors are specified with predefined color names, or with RGB, HEX, HSL, RGBA, or HSLA values.

Color Names
In HTML, a color can be specified by using a color name:

Tomato
Orange
DodgerBlue
MediumSeaGreen
Gray
SlateBlue
Violet
LightGray

HTML supports 140 standard color names.

Background Color
You can set the background color for HTML elements:

Hello World


Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Example
<h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">Lorem ipsum...</p>

Text Color
You can set the color of text:

Hello World
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Example
<h1 style="color:Tomato;">Hello World</h1>
<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</p>
Border Color
You can set the color of borders:

Hello World
Hello World
Hello World
Example
<h1 style="border:2px solid Tomato;">Hello World</h1>
<h1 style="border:2px solid DodgerBlue;">Hello World</h1>
<h1 style="border:2px solid Violet;">Hello World</h1>
Color Values
In HTML, colors can also be specified using RGB values, HEX values, HSL values, RGBA values, and HSLA values.

The following three <div> elements have their background color set with RGB, HEX, and HSL values:

rgb(255, 99, 71)
#ff6347
hsl(9, 100%, 64%)
The following two <div> elements have their background color set with RGBA and HSLA values, which adds an Alpha channel to the color (here we have 50% transparency):

rgba(255, 99, 71, 0.5)
hsla(9, 100%, 64%, 0.5)
Example
<h1 style="background-color:rgb(255, 99, 71);">...</h1>
<h1 style="background-color:#ff6347;">...</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">...</h1>

<h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h1>
Learn more about Color Values
You will learn more about RGB, HEX and HSL in the next chapters.
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<!DOCTYPE html>
<html>
<body>

<h1 style="background-color:Tomato;">Tomato</h1>
<h1 style="background-color:Orange;">Orange</h1>
<h1 style="background-color:DodgerBlue;">DodgerBlue</h1>
<h1 style="background-color:MediumSeaGreen;">MediumSeaGreen</h1>
<h1 style="background-color:Gray;">Gray</h1>
<h1 style="background-color:SlateBlue;">SlateBlue</h1>
<h1 style="background-color:Violet;">Violet</h1>
<h1 style="background-color:LightGray;">LightGray</h1>

</body>
</html>
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<!DOCTYPE html>
<html>
<body>

<h1 style="background-color:DodgerBlue;">Hello World</h1>

<p style="background-color:Tomato;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</p>

</body>
</html>





aaaa


<!DOCTYPE html>
<html>
<body>

<h3 style="color:Tomato;">Hello World</h3>

<p style="color:DodgerBlue;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

<p style="color:MediumSeaGreen;">Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>

</body>
</html>









aaaaaaaa


<!DOCTYPE html>
<html>
<body>

<h1 style="border: 2px solid Tomato;">Hello World</h1>

<h1 style="border: 2px solid DodgerBlue;">Hello World</h1>

<h1 style="border: 2px solid Violet;">Hello World</h1>

</body>
</html>
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<!DOCTYPE html>
<html>
<body>

<p>Same as color name "Tomato":</p>

<h1 style="background-color:rgb(255, 99, 71);">rgb(255, 99, 71)</h1>
<h1 style="background-color:#ff6347;">#ff6347</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">hsl(9, 100%, 64%)</h1>

<p>Same as color name "Tomato", but 50% transparent:</p>
<h1 style="background-color:rgba(255, 99, 71, 0.5);">rgba(255, 99, 71, 0.5)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">hsla(9, 100%, 64%, 0.5)</h1>

<p>In addition to the predefined color names, colors can be specified using RGB, HEX, HSL, or even transparent colors using RGBA or HSLA color values.</p>

</body>
</html>
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HTML RGB and RGBA Colors
An RGB color value represents RED, GREEN, and BLUE light sources.

An RGBA color value is an extension of RGB with an Alpha channel (opacity).

RGB Color Values
In HTML, a color can be specified as an RGB value, using this formula:

rgb(red, green, blue)

Each parameter (red, green, and blue) defines the intensity of the color with a value between 0 and 255.

This means that there are 256 x 256 x 256 = 16777216 possible colors!

For example, rgb(255, 0, 0) is displayed as red, because red is set to its highest value (255), and the other two (green and blue) are set to 0.

Another example, rgb(0, 255, 0) is displayed as green, because green is set to its highest value (255), and the other two (red and blue) are set to 0.

To display black, set all color parameters to 0, like this: rgb(0, 0, 0).

To display white, set all color parameters to 255, like this: rgb(255, 255, 255).

Experiment by mixing the RGB values below:

rgb(255, 99, 71)

RED


255
GREEN


99
BLUE


71
Example
rgb(255, 0, 0)
rgb(0, 0, 255)
rgb(60, 179, 113)
rgb(238, 130, 238)
rgb(255, 165, 0)
rgb(106, 90, 205)

Shades of Gray
Shades of gray are often defined using equal values for all three parameters:

Example
rgb(60, 60, 60)
rgb(100, 100, 100)
rgb(140, 140, 140)
rgb(180, 180, 180)
rgb(200, 200, 200)
rgb(240, 240, 240)

RGBA Color Values
RGBA color values are an extension of RGB color values with an Alpha channel - which specifies the opacity for a color.

An RGBA color value is specified with:

rgba(red, green, blue, alpha)

The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not transparent at all):

Experiment by mixing the RGBA values below:

rgba(255, 99, 71, 0.5)

RED


255
GREEN


99
BLUE


71
ALPHA


0.5
Example
rgba(255, 99, 71, 0)
rgba(255, 99, 71, 0.2)
rgba(255, 99, 71, 0.4)
rgba(255, 99, 71, 0.6)
rgba(255, 99, 71, 0.8)
rgba(255, 99, 71, 1)
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<!DOCTYPE html>
<html>
<body>

<h1 style="background-color:rgb(255, 0, 0);">rgb(255, 0, 0)</h1>
<h1 style="background-color:rgb(0, 0, 255);">rgb(0, 0, 255)</h1>
<h1 style="background-color:rgb(60, 179, 113);">rgb(60, 179, 113)</h1>
<h1 style="background-color:rgb(238, 130, 238);">rgb(238, 130, 238)</h1>
<h1 style="background-color:rgb(255, 165, 0);">rgb(255, 165, 0)</h1>
<h1 style="background-color:rgb(106, 90, 205);">rgb(106, 90, 205)</h1>

</body>
</html>
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<!DOCTYPE html>
<html>
<body>

<h1 style="background-color:rgb(60, 60, 60);">rgb(60, 60, 60)</h1>
<h1 style="background-color:rgb(100, 100, 100);">rgb(100, 100, 100)</h1>
<h1 style="background-color:rgb(140, 140, 140);">rgb(140, 140, 140)</h1>
<h1 style="background-color:rgb(180, 180, 180);">rgb(180, 180, 180)</h1>
<h1 style="background-color:rgb(200, 200, 200);">rgb(200, 200, 200)</h1>
<h1 style="background-color:rgb(240, 240, 240);">rgb(240, 240, 240)</h1>

</body>
</html>
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HTML HEX Colors
A hexadecimal color is specified with: #RRGGBB, where the RR (red), GG (green) and BB (blue) hexadecimal integers specify the components of the color.

HEX Color Values
In HTML, a color can be specified using a hexadecimal value in the form:

#rrggbb

Where rr (red), gg (green) and bb (blue) are hexadecimal values between 00 and ff (same as decimal 0-255).

For example, #ff0000 is displayed as red, because red is set to its highest value (ff), and the other two (green and blue) are set to 00.

Another example, #00ff00 is displayed as green, because green is set to its highest value (ff), and the other two (red and blue) are set to 00.

To display black, set all color parameters to 00, like this: #000000.

To display white, set all color parameters to ff, like this: #ffffff.

Experiment by mixing the HEX values below:

#ff6347

RED


ff
GREEN


63
BLUE


47
Example
#ff0000
#0000ff
#3cb371
#ee82ee
#ffa500
#6a5acd

Shades of Gray
Shades of gray are often defined using equal values for all three parametere:

Example
#404040
#686868
#a0a0a0
#bebebe
#dcdcdc
#f8f8f8
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<!DOCTYPE html>
<html>
<body>

<h1 style="background-color:#ff0000;">#ff0000</h1>
<h1 style="background-color:#0000ff;">#0000ff</h1>
<h1 style="background-color:#3cb371;">#3cb371</h1>
<h1 style="background-color:#ee82ee;">#ee82ee</h1>
<h1 style="background-color:#ffa500;">#ffa500</h1>
<h1 style="background-color:#6a5acd;">#6a5acd</h1>

</body>
</html>
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<!DOCTYPE html>
<html>
<body>

<h1 style="background-color:#404040;">#404040</h1>
<h1 style="background-color:#686868;">#686868</h1>
<h1 style="background-color:#a0a0a0;">#a0a0a0</h1>
<h1 style="background-color:#bebebe;">#bebebe</h1>
<h1 style="background-color:#dcdcdc;">#dcdcdc</h1>
<h1 style="background-color:#f8f8f8;">#f8f8f8</h1>

</body>
</html>
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HTML HSL and HSLA Colors
HSL stands for hue, saturation, and lightness.

HSLA color values are an extension of HSL with an Alpha channel (opacity).

HSL Color Values
In HTML, a color can be specified using hue, saturation, and lightness (HSL) in the form:

hsl(hue, saturation, lightness)

Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, and 240 is blue.

Saturation is a percentage value, 0% means a shade of gray, and 100% is the full color.

Lightness is also a percentage value, 0% is black, and 100% is white.

Experiment by mixing the HSL values below:

hsl(0, 100%, 50%)

HUE


0
SATURATION


100%
LIGHTNESS


50%
Example
hsl(0, 100%, 50%)
hsl(240, 100%, 50%)
hsl(147, 50%, 47%)
hsl(300, 76%, 72%)
hsl(39, 100%, 50%)
hsl(248, 53%, 58%)

Saturation
Saturation can be described as the intensity of a color.

100% is pure color, no shades of gray

50% is 50% gray, but you can still see the color.

0% is completely gray, you can no longer see the color.

Example
hsl(0, 100%, 50%)
hsl(0, 80%, 50%)
hsl(0, 60%, 50%)
hsl(0, 40%, 50%)
hsl(0, 20%, 50%)
hsl(0, 0%, 50%)

Lightness
The lightness of a color can be described as how much light you want to give the color, where 0% means no light (black), 50% means 50% light (neither dark nor light) 100% means full lightness (white).

Example
hsl(0, 100%, 0%)
hsl(0, 100%, 25%)
hsl(0, 100%, 50%)
hsl(0, 100%, 75%)
hsl(0, 100%, 90%)
hsl(0, 100%, 100%)

Shades of Gray
Shades of gray are often defined by setting the hue and saturation to 0, and adjust the lightness from 0% to 100% to get darker/lighter shades:

Example
hsl(0, 0%, 20%)
hsl(0, 0%, 30%)
hsl(0, 0%, 40%)
hsl(0, 0%, 60%)
hsl(0, 0%, 70%)
hsl(0, 0%, 90%)

HSLA Color Values
HSLA color values are an extension of HSL color values with an Alpha channel - which specifies the opacity for a color.

An HSLA color value is specified with:

hsla(hue, saturation, lightness, alpha)

The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not transparent at all):

Experiment by mixing the HSLA values below:

hsla(0, 100%, 50%, 0.5)

HUE


0
SATURATION


100%
LIGHTNESS


50%
ALPHA


0.5
Example
hsla(9, 100%, 64%, 0)
hsla(9, 100%, 64%, 0.2)
hsla(9, 100%, 64%, 0.4)
hsla(9, 100%, 64%, 0.6)
hsla(9, 100%, 64%, 0.8)
hsla(9, 100%, 64%, 1)
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<!DOCTYPE html>
<html>
<body>

<h1 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h1>
<h1 style="background-color:hsl(240, 100%, 50%);">hsl(240, 100%, 50%)</h1>
<h1 style="background-color:hsl(147, 50%, 47%);">hsl(147, 50%, 47%)</h1>
<h1 style="background-color:hsl(300, 76%, 72%);">hsl(300, 76%, 72%)</h1>
<h1 style="background-color:hsl(39, 100%, 50%);">hsl(39, 100%, 50%)</h1>
<h1 style="background-color:hsl(248, 53%, 58%);">hsl(248, 53%, 58%)</h1>

</body>
</html>
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<!DOCTYPE html>
<html>
<body>

<h1 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h1>
<h1 style="background-color:hsl(0, 80%, 50%);">hsl(0, 80%, 50%)</h1>
<h1 style="background-color:hsl(0, 60%, 50%);">hsl(0, 60%, 50%)</h1>
<h1 style="background-color:hsl(0, 40%, 50%);">hsl(0, 40%, 50%)</h1>
<h1 style="background-color:hsl(0, 20%, 50%);">hsl(0, 20%, 50%)</h1>
<h1 style="background-color:hsl(0, 0%, 50%);">hsl(0, 0%, 50%)</h1>

<p>With HSL colors, less saturation mean less color. 0% is completely gray.</p>

</body>
</html>
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<!DOCTYPE html>
<html>
<body>

<h1 style="background-color:hsl(0, 100%, 0%);">hsl(0, 100%, 0%)</h1>
<h1 style="background-color:hsl(0, 100%, 25%);">hsl(0, 100%, 25%)</h1>
<h1 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h1>
<h1 style="background-color:hsl(0, 100%, 75%);">hsl(0, 100%, 75%)</h1>
<h1 style="background-color:hsl(0, 100%, 90%);">hsl(0, 100%, 90%)</h1>
<h1 style="background-color:hsl(0, 100%, 100%);">hsl(0, 100%, 100%)</h1>

<p>With HSL colors, 0% lightness means black, and 100 lightness means white.</p>

</body>
</html>
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<!DOCTYPE html>
<html>
<body>

<h1 style="background-color:hsl(0, 0%, 20%);">hsl(0, 0%, 20%)</h1>
<h1 style="background-color:hsl(0, 0%, 30%);">hsl(0, 0%, 30%)</h1>
<h1 style="background-color:hsl(0, 0%, 40%);">hsl(0, 0%, 40%)</h1>
<h1 style="background-color:hsl(0, 0%, 60%);">hsl(0, 0%, 60%)</h1>
<h1 style="background-color:hsl(0, 0%, 70%);">hsl(0, 0%, 70%)</h1>
<h1 style="background-color:hsl(0, 0%, 90%);">hsl(0, 0%, 90%)</h1>

</body>
</html>
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<!DOCTYPE html>
<html>
<body>

<h1 style="background-color:hsla(9, 100%, 64%, 0);">hsla(9, 100%, 64%, 0)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.2);">hsla(9, 100%, 64%, 0.2)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.4);">hsla(9, 100%, 64%, 0.4)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.6);">hsla(9, 100%, 64%, 0.6)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.8);">hsla(9, 100%, 64%, 0.8)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 1);">hsla(9, 100%, 64%, 1)</h1>

</body>
</html>
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What is CSS?
Cascading Style Sheets (CSS) is used to format the layout of a webpage.

With CSS, you can control the color, font, the size of text, the spacing between elements, how elements are positioned and laid out, what background images or background colors are to be used, different displays for different devices and screen sizes, and much more!

Tip: The word cascading means that a style applied to a parent element will also apply to all children elements within the parent. So, if you set the color of the body text to "blue", all headings, paragraphs, and other text elements within the body will also get the same color (unless you specify something else)!

Using CSS

CSS can be added to HTML documents in 3 ways:

Inline - by using the style attribute inside HTML elements
Internal - by using a <style> element in the <head> section
External - by using a <link> element to link to an external CSS file
The most common way to add CSS, is to keep the styles in external CSS files. However, in this tutorial we will use inline and internal styles, because this is easier to demonstrate, and easier for you to try it yourself.

Inline CSS
An inline CSS is used to apply a unique style to a single HTML element.

An inline CSS uses the style attribute of an HTML element.


The following example sets the text color of the <h1> element to blue, and the text color of the <p> element to red:

Example
<h1 style="color:blue;">A Blue Heading</h1>

<p style="color:red;">A red paragraph.</p>


aaa

<!DOCTYPE html>
<html>
<body>

<h1 style="color:blue;">A Blue Heading</h1>

<p style="color:red;">A red paragraph.</p>

</body>
</html>
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Internal CSS
An internal CSS is used to define a style for a single HTML page.

An internal CSS is defined in the <head> section of an HTML page, within a <style> element.

The following example sets the text color of ALL the <h1> elements (on that page) to blue, and the text color of ALL the <p> elements to red. In addition, the page will be displayed with a "powderblue" background color: 

Example
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1   {color: blue;}
p    {color: red;}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

aaa

<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1   {color: blue;}
p    {color: red;}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>
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External CSS
An external style sheet is used to define the style for many HTML pages.

To use an external style sheet, add a link to it in the <head> section of each HTML page:

Example
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>
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<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>
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<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>
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The external style sheet can be written in any text editor. The file must not contain any HTML code, and must be saved with a .css extension.

Here is what the "styles.css" file looks like:

"styles.css":
body {
  background-color: powderblue;
}
h1 {
  color: blue;
}
p {
  color: red;
}
Tip: With an external style sheet, you can change the look of an entire web site, by changing one file!

CSS Colors, Fonts and Sizes
Here, we will demonstrate some commonly used CSS properties. You will learn more about them later.

The CSS color property defines the text color to be used.

The CSS font-family property defines the font to be used.

The CSS font-size property defines the text size to be used.

Example
Use of CSS color, font-family and font-size properties:

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  color: blue;
  font-family: verdana;
  font-size: 300%;
}
p {
  color: red;
  font-family: courier;
  font-size: 160%;
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>
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<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  color: blue;
  font-family: verdana;
  font-size: 300%;

}
p  {
  color: red;
  font-family: courier;
  font-size: 160%;
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>
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CSS Border
The CSS border property defines a border around an HTML element.

Tip: You can define a border for nearly all HTML elements.

Example
Use of CSS border property: 

p {
  border: 2px solid powderblue;
}
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<!DOCTYPE html>
<html>
<head>
<style>
p {
  border: 2px solid powderblue;
}
</style>
</head>
<body>

<h1>This is a heading</h1>

<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>

</body>
</html>
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CSS Padding
The CSS padding property defines a padding (space) between the text and the border.

Example
Use of CSS border and padding properties:

p {
  border: 2px solid powderblue;
  padding: 30px;
}
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<!DOCTYPE html>
<html>
<head>
<style>
p {
  border: 2px solid powderblue;
  padding: 30px;
}
</style>
</head>
<body>

<h1>This is a heading</h1>

<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>

</body>
</html>
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CSS Margin
The CSS margin property defines a margin (space) outside the border.

Example
Use of CSS border and margin properties:

p {
  border: 2px solid powderblue;
  margin: 50px;
}
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<!DOCTYPE html>
<html>
<head>
<style>
p {
  border: 2px solid powderblue;
  margin: 50px;
}
</style>
</head>
<body>

<h1>This is a heading</h1>

<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>

</body>
</html>
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Link to External CSS
External style sheets can be referenced with a full URL or with a path relative to the current web page.

Example
This example uses a full URL to link to a style sheet:

<link rel="stylesheet" href="https://www.w3schools.com/html/styles.css">
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<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://www.w3schools.com/html/styles.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>


aa

Example
This example links to a style sheet located in the html folder on the current web site: 

<link rel="stylesheet" href="/html/styles.css">



<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="/html/styles.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>



aa


Example
This example links to a style sheet located in the same folder as the current page:

<link rel="stylesheet" href="styles.css">




<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>



aaa

You can read more about file paths in the chapter HTML File Paths.

Chapter Summary
Use the HTML style attribute for inline styling
Use the HTML <style> element to define internal CSS
Use the HTML <link> element to refer to an external CSS file
Use the HTML <head> element to store <style> and <link> elements
Use the CSS color property for text colors
Use the CSS font-family property for text fonts
Use the CSS font-size property for text sizes
Use the CSS border property for borders
Use the CSS padding property for space inside the border
Use the CSS margin property for space outside the border
Tip: You can learn much more about CSS in our CSS Tutorial.
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HTML Links
Links are found in nearly all web pages. Links allow users to click their way from page to page.

HTML Links - Hyperlinks
HTML links are hyperlinks.

You can click on a link and jump to another document.

When you move the mouse over a link, the mouse arrow will turn into a little hand.

Note: A link does not have to be text. A link can be an image or any other HTML element!

HTML Links - Syntax
The HTML <a> tag defines a hyperlink. It has the following syntax:

<a href="url">link text</a>
The most important attribute of the <a> element is the href attribute, which indicates the link's destination.

The link text is the part that will be visible to the reader.

Clicking on the link text, will send the reader to the specified URL address.

Example
This example shows how to create a link to W3Schools.com:

<a href="https://www.w3schools.com/">Visit W3Schools.com!</a>
By default, links will appear as follows in all browsers:

An unvisited link is underlined and blue
A visited link is underlined and purple
An active link is underlined and red
Tip: Links can of course be styled with CSS, to get another look!

HTML Links - The target Attribute
By default, the linked page will be displayed in the current browser window. To change this, you must specify another target for the link.

The target attribute specifies where to open the linked document.

The target attribute can have one of the following values:

_self - Default. Opens the document in the same window/tab as it was clicked
_blank - Opens the document in a new window or tab
_parent - Opens the document in the parent frame
_top - Opens the document in the full body of the window
Example
Use target="_blank" to open the linked document in a new browser window or tab:

<a href="https://www.w3schools.com/" target="_blank">Visit W3Schools!</a>
Absolute URLs vs. Relative URLs
Both examples above are using an absolute URL (a full web address) in the href attribute.

A local link (a link to a page within the same website) is specified with a relative URL (without the "https://www" part):

Example
<h2>Absolute URLs</h2>
<p><a href="https://www.w3.org/">W3C</a></p>
<p><a href="https://www.google.com/">Google</a></p>

<h2>Relative URLs</h2>
<p><a href="html_images.asp">HTML Images</a></p>
<p><a href="/css/default.asp">CSS Tutorial</a></p>
HTML Links - Use an Image as a Link
To use an image as a link, just put the <img> tag inside the <a> tag:

Example
<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;">
</a>
Link to an Email Address
Use mailto: inside the href attribute to create a link that opens the user's email program (to let them send a new email):

Example
<a href="mailto:someone@example.com">Send email</a>
Button as a Link
To use an HTML button as a link, you have to add some JavaScript code.

JavaScript allows you to specify what happens at certain events, such as a click of a button:

Example
<button onclick="document.location='default.asp'">HTML Tutorial</button>
Tip: Learn more about JavaScript in our JavaScript Tutorial.

Link Titles
The title attribute specifies extra information about an element. The information is most often shown as a tooltip text when the mouse moves over the element.

Example
<a href="https://www.w3schools.com/html/" title="Go to W3Schools HTML section">Visit our HTML Tutorial</a>
More on Absolute URLs and Relative URLs
Example
Use a full URL to link to a web page: 

<a href="https://www.w3schools.com/html/default.asp">HTML tutorial</a>

Example
Link to a page located in the html folder on the current web site: 

<a href="/html/default.asp">HTML tutorial</a>

Example
Link to a page located in the same folder as the current page: 

<a href="default.asp">HTML tutorial</a>

You can read more about file paths in the chapter HTML File Paths.

Chapter Summary
Use the <a> element to define a link
Use the href attribute to define the link address
Use the target attribute to define where to open the linked document
Use the <img> element (inside <a>) to use an image as a link
Use the mailto: scheme inside the href attribute to create a link that opens the user's email program
HTML Link Tags
Tag	Description
<a>	Defines a hyperlink
For a complete list of all available HTML tags, visit our HTML Tag Reference.
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<!DOCTYPE html>
<html>
<body>

<h1>HTML Links</h1>

<p><a href="https://www.w3schools.com/">Visit W3Schools.com!</a></p>

</body>
</html>
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<!DOCTYPE html>
<html>
<body>

<h2>The target Attribute</h2>

<a href="https://www.w3schools.com/" target="_blank">Visit W3Schools!</a> 

<p>If target="_blank", the link will open in a new browser window or tab.</p>

</body>
</html>

aa

<!DOCTYPE html>
<html>
<body>

<h2>Absolute URLs</h2>
<p><a href="https://www.w3.org/">W3C</a></p>
<p><a href="https://www.google.com/">Google</a></p>

<h2>Relative URLs</h2>
<p><a href="html_images.asp">HTML Images</a></p>
<p><a href="/css/default.asp">CSS Tutorial</a></p>

</body>
</html>
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<!DOCTYPE html>
<html>
<body>

<h2>Image as a Link</h2>

<p>The image below is a link. Try to click on it.</p>

<a href="default.asp"><img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;"></a>

</body>
</html>
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<!DOCTYPE html>
<html>
<body>

<h2>Link to an Email Address</h2>

<p>To create a link that opens in the user's email program (to let them send a new email), use mailto: inside the href attribute:</p>

<p><a href="mailto:someone@example.com">Send email</a></p>

</body>
</html>
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<!DOCTYPE html>
<html>
<body>

<h2>Button as a Links</h2>

<p>Click the button to go to the HTML tutorial.</p>

<button onclick="document.location='default.asp'">HTML Tutorial</button>

</body>
</html>
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<!DOCTYPE html>
<html lang="en-US">
<body>

<h2>Link Titles</h2>
<p>The title attribute specifies extra information about an element. The information is most often shown as a tooltip text when the mouse moves over the element.</p>
<a href="https://www.w3schools.com/html/" title="Go to W3Schools HTML section">Visit our HTML Tutorial</a>

</body>
</html>
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<!DOCTYPE html>
<html>
<body>

<h2>External Paths</h2>

<p>This example uses a full URL to link to a web page:</p>
<p><a href="https://www.w3schools.com/html/default.asp">HTML tutorial</a></p>

</body>
</html>
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<!DOCTYPE html>
<html>
<body>

<h2>External Paths</h2>

<p>This example links to a page located in the same folder as the current page:</p>

<p><a href="default.asp">HTML tutorial</a></p>

</body>
</html>
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HTML Links - Different Colors
An HTML link is displayed in a different color depending on whether it has been visited, is unvisited, or is active.

HTML Link Colors
By default, a link will appear like this (in all browsers):

An unvisited link is underlined and blue
A visited link is underlined and purple
An active link is underlined and red
You can change the link state colors, by using CSS:

Example
Here, an unvisited link will be green with no underline. A visited link will be pink with no underline. An active link will be yellow  and underlined. In addition, when mousing over a link (a:hover) it will become red and underlined:

<style>
a:link {
  color: green;
  background-color: transparent;
  text-decoration: none;
}

a:visited {
  color: pink;
  background-color: transparent;
  text-decoration: none;
}

a:hover {
  color: red;
  background-color: transparent;
  text-decoration: underline;
}

a:active {
  color: yellow;
  background-color: transparent;
  text-decoration: underline;
}
</style>
Link Buttons
A link can also be styled as a button, by using CSS:

This is a link
Example
<style>
a:link, a:visited {
  background-color: #f44336;
  color: white;
  padding: 15px 25px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

a:hover, a:active {
  background-color: red;
}
</style>
To learn more about CSS, go to our CSS Tutorial.

HTML Link Tags
Tag	Description
<a>	Defines a hyperlink
For a complete list of all available HTML tags, visit our HTML Tag Reference.
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<!DOCTYPE html>
<html>
<head>
<style>
a:link {
  color: green;
  background-color: transparent;
  text-decoration: none;
}
a:visited {
  color: pink;
  background-color: transparent;
  text-decoration: none;
}
a:hover {
  color: red;
  background-color: transparent;
  text-decoration: underline;
}
a:active {
  color: yellow;
  background-color: transparent;
  text-decoration: underline;
}
</style>
</head>
<body>

<h2>Link Colors</h2>

<p>You can change the default colors of links</p>

<a href="html_images.asp" target="_blank">HTML Images</a> 

</body>
</html>
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<!DOCTYPE html>
<html>
<head>
<style>
a:link, a:visited {
  background-color: #f44336;
  color: white;
  padding: 15px 25px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

a:hover, a:active {
  background-color: red;
}
</style>
</head>
<body>

<h2>Link Button</h2>
<p>A link styled as a button:</p>
<a href="default.asp" target="_blank">This is a link</a>

</body>
</html>
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HTML Links - Create Bookmarks
HTML links can be used to create bookmarks, so that readers can jump to specific parts of a web page.

Create a Bookmark in HTML
Bookmarks can be useful if a web page is very long.

To create a bookmark - first create the bookmark, then add a link to it.

When the link is clicked, the page will scroll down or up to the location with the bookmark.

Example
First, use the id attribute to create a bookmark:

<h2 id="C4">Chapter 4</h2>
Then, add a link to the bookmark ("Jump to Chapter 4"), from within the same page:

Example
<a href="#C4">Jump to Chapter 4</a>
You can also add a link to a bookmark on another page:

<a href="html_demo.html#C4">Jump to Chapter 4</a>
Chapter Summary
Use the id attribute (id="value") to define bookmarks in a page
Use the href attribute (href="#value") to link to the bookmark
HTML Exercises
Test Yourself With Exercises
Exercise:
Use the correct HTML to make the text below into a link to "default.html".

 
>Visit our HTML tutorial.

Start the Exercise

HTML Link Tags
Tag	Description
<a>	Defines a hyperlink
For a complete list of all available HTML tags, visit our HTML Tag Reference.
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<!DOCTYPE html>
<html>
<body>

<p><a href="#C4">Jump to Chapter 4</a></p>
<p><a href="#C10">Jump to Chapter 10</a></p>

<h2>Chapter 1</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 2</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 3</h2>
<p>This chapter explains ba bla bla</p>

<h2 id="C4">Chapter 4</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 5</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 6</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 7</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 8</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 9</h2>
<p>This chapter explains ba bla bla</p>

<h2 id="C10">Chapter 10</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 11</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 12</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 13</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 14</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 15</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 16</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 17</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 18</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 19</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 20</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 21</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 22</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 23</h2>
<p>This chapter explains ba bla bla</p>

</body>
</html>
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HTML Images
Images can improve the design and the appearance of a web page.

Example
<img src="pic_trulli.jpg" alt="Italian Trulli">
Example
<img src="img_girl.jpg" alt="Girl in a jacket">
Example
<img src="img_chania.jpg" alt="Flowers in Chania">
HTML Images Syntax
The HTML <img> tag is used to embed an image in a web page.

Images are not technically inserted into a web page; images are linked to web pages. The <img> tag creates a holding space for the referenced image.

The <img> tag is empty, it contains attributes only, and does not have a closing tag.

The <img> tag has two required attributes:

src - Specifies the path to the image
alt - Specifies an alternate text for the image
Syntax
<img src="url" alt="alternatetext">
The src Attribute
The required src attribute specifies the path (URL) to the image.

Note: When a web page loads; it is the browser, at that moment, that gets the image from a web server and inserts it into the page. Therefore, make sure that the image actually stays in the same spot in relation to the web page, otherwise your visitors will get a broken link icon. The broken link icon and the alt text are shown if the browser cannot find the image.

Example
<img src="img_chania.jpg" alt="Flowers in Chania">
The alt Attribute
The required alt attribute provides an alternate text for an image, if the user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader).

The value of the alt attribute should describe the image:

Example
<img src="img_chania.jpg" alt="Flowers in Chania">
If a browser cannot find an image, it will display the value of the alt attribute:

Example
<img src="wrongname.gif" alt="Flowers in Chania">
Tip: A screen reader is a software program that reads the HTML code, and allows the user to "listen" to the content. Screen readers are useful for people who are visually impaired or learning disabled.

Image Size - Width and Height
You can use the style attribute to specify the width and height of an image.

Example
<img src="img_girl.jpg" alt="Girl in a jacket" style="width:500px;height:600px;">
Alternatively, you can use the width and height attributes:

Example
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
The width and height attributes always define the width and height of the image in pixels.

Note: Always specify the width and height of an image. If width and height are not specified, the web page might flicker while the image loads.

Width and Height, or Style?
The width, height, and style attributes are all valid in HTML.

However, we suggest using the style attribute. It prevents styles sheets from changing the size of images:

Example
<!DOCTYPE html>
<html>
<head>
<style>
img {
  width: 100%;
}
</style>
</head>
<body>

<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">

<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">

</body>
</html>
Images in Another Folder
If you have your images in a sub-folder, you must include the folder name in the src attribute:

Example
<img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
Images on Another Server/Website
Some web sites points to an external image on another server.

To point to an image on another server, you must specify an absolute (full) URL in the src attribute:

Example
<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com">
Notes on external images: External images might be under copyright. If you do not get permission to use it, you may be in violation of copyright laws. In addition, you cannot control external images; it can suddenly be removed or changed.

Animated Images
HTML allows animated GIFs:

Example
<img src="programming.gif" alt="Computer Man" style="width:48px;height:48px;">
Image as a Link
To use an image as a link, put the <img> tag inside the <a> tag:

Example
<a href="default.asp">
  <img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;">
</a>
Image Floating
Use the CSS float property to let the image float to the right or to the left of a text:

Example
<p><img src="smiley.gif" alt="Smiley face" style="float:right;width:42px;height:42px;">
The image will float to the right of the text.</p>

<p><img src="smiley.gif" alt="Smiley face" style="float:left;width:42px;height:42px;">
The image will float to the left of the text.</p>
Tip: To learn more about CSS Float, read our CSS Float Tutorial.

Common Image Formats
Here are the most common image file types, which are supported in all browsers (Chrome, Edge, Firefox, Safari, Opera):

Abbreviation	File Format	File Extension
APNG	Animated Portable Network Graphics	.apng
GIF	Graphics Interchange Format	.gif
ICO	Microsoft Icon	.ico, .cur
JPEG	Joint Photographic Expert Group image	.jpg, .jpeg, .jfif, .pjpeg, .pjp
PNG	Portable Network Graphics	.png
SVG	Scalable Vector Graphics	.svg
Chapter Summary
Use the HTML <img> element to define an image
Use the HTML src attribute to define the URL of the image
Use the HTML alt attribute to define an alternate text for an image, if it cannot be displayed
Use the HTML width and height attributes or the CSS width and height properties to define the size of the image
Use the CSS float property to let the image float to the left or to the right
Note: Loading large images takes time, and can slow down your web page. Use images carefully.

HTML Exercises
Test Yourself With Exercises
Exercise:
Use the HTML image attributes to set the size of the image to 250 pixels wide and 400 pixels tall.

<img src="scream.png" 
="250" 
="400">

Start the Exercise

HTML Image Tags
Tag	Description
<img>	Defines an image
<map>	Defines an image map
<area>	Defines a clickable area inside an image map
<picture>	Defines a container for multiple image resources
For a complete list of all available HTML tags, visit our HTML Tag Reference.
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<!DOCTYPE html>
<html>
<body>

<h2>HTML Image</h2>
<img src="pic_trulli.jpg" alt="Trulli" width="500" height="333">

</body>
</html>
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<!DOCTYPE html>
<html>
<body>

<h2>HTML Image</h2>
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">

</body>
</html>
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<!DOCTYPE html>
<html>
<body>

<h2>HTML Image</h2>
<img src="img_chania.jpg" alt="Flowers in Chania" width="460" height="345">

</body>
</html>
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<!DOCTYPE html>
<html>
<body>

<h2>Alternative text</h2>

<p>The alt attribute should reflect the image content, so users who cannot see the image gets an understanding of what the image contains:</p>

<img src="img_chania.jpg" alt="Flowers in Chania" width="460" height="345">

</body>
</html>
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<!DOCTYPE html>
<html>
<body>

<h2>Alternative text</h2>

<p>The alt attribute should reflect the image content, so users who cannot see the image gets an understanding of what the image contains:</p>

<img src="img_chania.jpg" alt="Flowers in Chania" width="460" height="345">

</body>
</html>
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<!DOCTYPE html>
<html>
<body>

<p>If a browser cannot find the image, it will display the alternate text:</p>

<img src="wrongname.gif" alt="Flowers in Chania">

</body>
</html>
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<!DOCTYPE html>
<html>
<body>

<h2>Image Size</h2>

<p>Here we use the style attribute to specify the width and height of an image:</p>

<img src="img_girl.jpg" alt="Girl in a jacket" style="width:500px;height:600px;">

</body>
</html>
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<!DOCTYPE html>
<html>
<body>

<h2>Image Size</h2>

<p>Here we specify the width and height of an image with the width and height attributes:</p>

<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">

</body>
</html>
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<!DOCTYPE html>
<html>
<head>
<style>
/* This style sets the width of all images to 100%: */
img {
  width: 100%;
}
</style>
</head>
<body>

<h2>Width/Height Attributes or Style?</h2>

<p>The first image uses the width attribute (set to 128 pixels), but the style in the head section overrides it, and sets the width to 100%.</p>

<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">

<p>The second image uses the style attribute to set the width to 128 pixels, this will not be overridden by the style in the head section:</p>

<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">

</body>
</html>
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<!DOCTYPE html>
<html>
<body>

<h2>Images in Another Folder</h2>
<p>It is common to store images in a sub-folder. You must then include the folder name in the src attribute:</p>

<img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">

</body>
</html>
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<!DOCTYPE html>
<html>
<body>

<h2>Images on Another Server</h2>

<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com" style="width:104px;height:142px;">

</body>
</html>
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<!DOCTYPE html>
<html>
<body>

<h2>Animated Images</h2>

<p>HTML allows moving images:</p>

<img src="programming.gif" alt="Computer man" style="width:48px;height:48px;">

</body>
</html>
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<!DOCTYPE html>
<html>
<body>

<h2>Image as a Link</h2>

<p>The image is a link. You can click on it.</p>

<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;">
</a>

</body>
</html>
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HTML Image Maps
With HTML image maps, you can create clickable areas on an image.

Image Maps
The HTML <map> tag defines an image map. An image map is an image with clickable areas. The areas are defined with one or more <area> tags.

Try to click on the computer, phone, or the cup of coffee in the image below:

Workplace
Example
Here is the HTML source code for the image map above:

<img src="workplace.jpg" alt="Workplace" usemap="#workmap">

<map name="workmap">
  <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
  <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
  <area shape="circle" coords="337,300,44" alt="Coffee" href="coffee.htm">
</map>
How Does it Work?
The idea behind an image map is that you should be able to perform different actions depending on where in the image you click.

To create an image map you need an image, and some HTML code that describes the clickable areas.


The Image
The image is inserted using the <img> tag. The only difference from other images is that you must add a usemap attribute:

<img src="workplace.jpg" alt="Workplace" usemap="#workmap">
The usemap value starts with a hash tag # followed by the name of the image map, and is used to create a relationship between the image and the image map.

Tip: You can use any image as an image map!

Create Image Map
Then, add a <map> element.

The <map> element is used to create an image map, and is linked to the image by using the required name attribute:

<map name="workmap">
The name attribute must have the same value as the <img>'s usemap attribute .

The Areas
Then, add the clickable areas.

A clickable area is defined using an <area> element.

Shape
You must define the shape of the clickable area, and you can choose one of these values:

rect - defines a rectangular region
circle - defines a circular region
poly - defines a polygonal region
default - defines the entire region
You must also define some coordinates to be able to place the clickable area onto the image. 

Shape="rect"
The coordinates for shape="rect" come in pairs, one for the x-axis and one for the y-axis.

So, the coordinates 34,44 is located 34 pixels from the left margin and 44 pixels from the top:

Workplace
The coordinates 270,350 is located 270 pixels from the left margin and 350 pixels from the top:

Workplace
Now we have enough data to create a clickable rectangular area:

Example
<area shape="rect" coords="34, 44, 270, 350" href="computer.htm">
This is the area that becomes clickable and will send the user to the page "computer.htm":

Workplace
Shape="circle"
To add a circle area, first locate the coordinates of the center of the circle:

337,300

Workplace
Then specify the radius of the circle:

44 pixels

Workplace
Now you have enough data to create a clickable circular area:

Example
<area shape="circle" coords="337, 300, 44" href="coffee.htm">
This is the area that becomes clickable and will send the user to the page "coffee.htm":

Workplace
Shape="poly"
The shape="poly" contains several coordinate points, which creates a shape formed with straight lines (a polygon).

This can be used to create any shape.

Like maybe a croissant shape!

How can we make the croissant in the image below become a clickable link?

French Food
We have to find the x and y coordinates for all edges of the croissant:

French Food
The coordinates come in pairs, one for the x-axis and one for the y-axis:

Example
<area shape="poly" coords="140,121,181,116,204,160,204,222,191,270,140,329,85,355,58,352,37,322,40,259,103,161,128,147" href="croissant.htm">
This is the area that becomes clickable and will send the user to the page "croissant.htm":

French Food
Image Map and JavaScript
A clickable area can also trigger a JavaScript function.

Add a click event to the <area> element to execute a JavaScript function:

Example
Here, we use the onclick attribute to execute a JavaScript function when the area is clicked:

<map name="workmap">
  <area shape="circle" coords="337,300,44" onclick="myFunction()">
</map>

<script>
function myFunction() {
  alert("You clicked the coffee cup!");
}
</script>
Chapter Summary
Use the HTML <map> element to define an image map
Use the HTML <area> element to define the clickable areas in the image map
Use the HTML usemap attribute of the <img> element to point to an image map
HTML Image Tags
Tag	Description
<img>	Defines an image
<map>	Defines an image map
<area>	Defines a clickable area inside an image map
<picture>	Defines a container for multiple image resources
For a complete list of all available HTML tags, visit our HTML Tag Reference.
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<!DOCTYPE html>
<html>
<body>

<h2>Image Maps</h2>
<p>Click on the computer, the phone, or the cup of coffee to go to a new page and read more about the topic:</p>

<img src="workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">

<map name="workmap">
  <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
  <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
  <area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.htm">
</map>

</body>
</html>
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<!DOCTYPE html>
<html>
<body>

<h2>Image Maps</h2>
<p>Click on the computer, to go to a new page and read more about the topic:</p>

<img src="workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">

<map name="workmap">
  <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
</map>

</body>
</html>
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<!DOCTYPE html>
<html>
<body>

<h2>Image Maps</h2>
<p>Click on the cup of coffee to go to a new page and read more about the topic:</p>

<img src="workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">

<map name="workmap">
  <area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.htm">
</map>

</body>
</html>
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<!DOCTYPE html>
<html>
<body>

<h2>Image Maps</h2>
<p>Click on the croissant to go to a new page and read more about the topic:</p>

<img src="frenchfood.jpg" alt="French Food" usemap="#foodmap" width="450" height="675">

<map name="foodmap">
  <area shape="poly" coords="140,121,181,116,204,160,204,222,191,270,140,329,85,355,58,352,37,322,40,259,103,161,128,147" alt="Croissant" href="croissant.htm">
</map>

</body>
</html>
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<!DOCTYPE html>
<html>
<body>

<h2>Image Maps</h2>

<p>Click on the cup of coffee to execute a JavaScript function:</p>

<img src="workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">

<map name="workmap">
  <area shape="circle" coords="337,300,44" onclick="myFunction()">
</map>

<script>
function myFunction() {
  alert("You clicked the coffee cup!");
}
</script>

</body>
</html>
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HTML Background Images
A background image can be specified for almost any HTML element.

Background Image on a HTML element
To add a background image on an HTML element, use the HTML style attribute and the CSS background-image property:

Example
Add a background image on a HTML element:

<div style="background-image: url('img_girl.jpg');">
You can also specify the background image in the <style> element, in the <head> section:

Example
Specify the background image in the <style> element:

<style>
div {
  background-image: url('img_girl.jpg');
}
</style>
Background Image on a Page
If you want the entire page to have a background image, you must specify the background image on the <body> element:

Example
Add a background image for the entire page:

<style>
body {
  background-image: url('img_girl.jpg');
}
</style>
Background Repeat
If the background image is smaller than the element, the image will repeat itself, horizontally and vertically, until it reaches the end of the element:

Example
<style>
body {
  background-image: url('example_img_girl.jpg');
}
</style>
To avoid the background image from repeating itself, set the background-repeat property to no-repeat.

Example
<style>
body {
  background-image: url('example_img_girl.jpg');
  background-repeat: no-repeat;
}
</style>
Background Cover
If you want the background image to cover the entire element, you can set the background-size property to cover.

Also, to make sure the entire element is always covered, set the background-attachment property to fixed:

This way, the background image will cover the entire element, with no stretching (the image will keep its original proportions):

Example
<style>
body {
  background-image: url('img_girl.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}
</style>
Background Stretch
If you want the background image to stretch to fit the entire element, you can set the background-size property to 100% 100%:

Try resizing the browser window, and you will see that the image will stretch, but always cover the entire element.

Example
<style>
body {
  background-image: url('img_girl.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100% 100%;
}
</style>
Learn More CSS
From the examples above you have learned that background images can be styled by using the CSS background properties.

To learn more about CSS background properties, study our CSS Background Tutorial.
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<!DOCTYPE html>
<html>
<body>

<h2>Background Image</h2>

<p>A background image for a div element:</p>

<div style="background-image: url('img_girl.jpg');">
You can specify background images<br>
for any visible HTML element.<br>
In this example, the background image<br>
is specified for a div element.<br>
By default, the background-image<br>
will repeat itself in the direction(s)<br>
where it is smaller than the element<br>
where it is specified. (Try resizing the<br>
browser window to see how the<br>
background image behaves.
</div>

<p>A background image for a p element:</p>

<p style="background-image: url('img_girl.jpg');">
You can specify background images<br>
for any visible HTML element.<br>
In this example, the background image<br>
is specified for a p element.<br>
By default, the background-image<br>
will repeat itself in the direction(s)<br>
where it is smaller than the element<br>
where it is specified. (Try resizing the<br>
browser window to see how the<br>
background image behaves.
</p>

</body>
</html>
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<!DOCTYPE html>
<html>
<head>
<style>
div {
  background-image: url('img_girl.jpg');
}
</style>
</head>
<body>

<h2>Background Image</h2>

<div>
You can specify background images<br>
for any visible HTML element.<br>
In this example, the background image<br>
is specified for a div element.<br>
By default, the background-image<br>
will repeat itself in the direction(s)<br>
where it is smaller than the element<br>
where it is specified. (Try resizing the<br>
browser window to see how the<br>
background image behaves.
</div>

</body>
</html>
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<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-image: url('img_girl.jpg');
}
</style>
</head>
<body>

<h2>Background Image</h2>

<p>By default, the background image will repeat itself if it is smaller than the element where it is specified, in this case the body element.</p>

</body>
</html>
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<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-image: url('example_img_girl.jpg');
}
</style>
</head>
<body>

<h2>Background Repeat</h2>

<p>By default, the background image will repeat itself if it is smaller than the element where it is specified, in this case the body element.</p>

</body>
</html>
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<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-image: url('example_img_girl.jpg');
  background-repeat: no-repeat;
}
</style>
</head>
<body>

<h2>Background No Repeat</h2>

<p>You can avoid the image from being repeated by setting the background-repeat property to "no-repeat".</p>

</body>
</html>
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<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-image: url('img_girl.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;  
  background-size: cover;
}
</style>
</head>
<body>

<h2>Background Cover</h2>

<p>Set the background-size property to "cover" and the background image will cover the entire element, in this case the body element.</p>

</body>
</html>
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<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-image: url('img_girl.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed; 
  background-size: 100% 100%;
}
</style>
</head>
<body>

<h2>Background Stretch</h2>

<p>Set the background-size property to "100% 100%" and the background image will be stretched to cover the entire element, in this case the body element.</p>

</body>
</html>
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HTML <picture> Element
The HTML <picture> element allows you to display different pictures for different devices or screen sizes.


The HTML <picture> Element
The HTML <picture> element gives web developers more flexibility in specifying image resources.

The <picture> element contains one or more <source> elements, each referring to different images through the srcset attribute. This way the browser can choose the image that best fits the current view and/or device.

Each <source> element has a media attribute that defines when the image is the most suitable.

Example
Show different images for different screen sizes:

<picture>
  <source media="(min-width: 650px)" srcset="img_food.jpg">
  <source media="(min-width: 465px)" srcset="img_car.jpg">
  <img src="img_girl.jpg">
</picture>
Note: Always specify an <img> element as the last child element of the <picture> element. The <img> element is used by browsers that do not support the <picture> element, or if none of the <source> tags match.

When to use the Picture Element
There are two main purposes for the <picture> element:

1. Bandwidth
If you have a small screen or device, it is not necessary to load a large image file. The browser will use the first <source> element with matching attribute values, and ignore any of the following elements.

2. Format Support
Some browsers or devices may not support all image formats. By using the <picture> element, you can add images of all formats, and the browser will use the first format it recognizes, and ignore any of the following elements.

Example
The browser will use the first image format it recognizes:

<picture>
  <source srcset="img_avatar.png">
  <source srcset="img_girl.jpg">
  <img src="img_beatles.gif" alt="Beatles" style="width:auto;">
</picture>
Note: The browser will use the first <source> element with matching attribute values, and ignore any following <source> elements.

HTML Image Tags
Tag	Description
<img>	Defines an image
<map>	Defines an image map
<area>	Defines a clickable area inside an image map
<picture>	Defines a container for multiple image resources
For a complete list of all available HTML tags, visit our HTML Tag Reference.
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<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<h2>The picture Element</h2>

<picture>
  <source media="(min-width: 650px)" srcset="img_food.jpg">
  <source media="(min-width: 465px)" srcset="img_car.jpg">
  <img src="img_girl.jpg" style="width:auto;">
</picture>

<p>Resize the browser to see different versions of the picture loading at different viewport sizes.
The browser looks for the first source element where the media query matches the user's current viewport width,
and fetches the image specified in the srcset attribute.</p>

<p>The img element is required as the last child tag of the picture declaration block.
The img element is used to provide backward compatibility for browsers that do not support the picture element, or if none of the source tags matched.
</p>

<p><strong>Note:</strong> The picture element is not supported in IE12 and earlier or Safari 9.0 and earlier.</p>

</body>
</html>
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<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<h2>The picture Element</h2>

<picture>
  <source srcset="img_avatar.png">
  <source srcset="img_girl.jpg">
  <img src="img_beatles.gif" alt="Beatles" style="width:auto;">
</picture>

<p>The picture element can be used when the image format is not supported by all devices.</p>

<p>The device will use the first image format it supports, and ignore the rest of the images.</p>

</body>
</html>
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HTML Tables
HTML tables allow web developers to arrange data into rows and columns.

Example
Company	Contact	Country
Alfreds Futterkiste	Maria Anders	Germany
Centro comercial Moctezuma	Francisco Chang	Mexico
Ernst Handel	Roland Mendel	Austria
Island Trading	Helen Bennett	UK
Laughing Bacchus Winecellars	Yoshi Tannamuri	Canada
Magazzini Alimentari Riuniti	Giovanni Rovelli	Italy
Define an HTML Table
The <table> tag defines an HTML table.

Each table row is defined with a <tr> tag. Each table header is defined with a <th> tag. Each table data/cell is defined with a <td> tag.

By default, the text in <th> elements are bold and centered.

By default, the text in <td> elements are regular and left-aligned.

Example
A simple HTML table:

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>
Note: The <td> elements are the data containers of the table.
They can contain all sorts of HTML elements; text, images, lists, other tables, etc.


HTML Table - Add a Border
To add a border to a table, use the CSS border property:

Example
table, th, td {
  border: 1px solid black;
}
Remember to define borders for both the table and the table cells.

HTML Table - Collapsed Borders
To let the borders collapse into one border, add the CSS border-collapse property:

Example
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
HTML Table - Add Cell Padding
Cell padding specifies the space between the cell content and its borders.

If you do not specify a padding, the table cells will be displayed without padding.

To set the padding, use the CSS padding property:

Example
th, td {
  padding: 15px;
}
HTML Table - Left-align Headings
By default, table headings are bold and centered.

To left-align the table headings, use the CSS text-align property:

Example
th {
  text-align: left;
}
HTML Table - Add Border Spacing
Border spacing specifies the space between the cells.

To set the border spacing for a table, use the CSS border-spacing property:

Example
table {
  border-spacing: 5px;
}
Note: If the table has collapsed borders, border-spacing has no effect.

HTML Table - Cell that Spans Many Columns
To make a cell span more than one column, use the colspan attribute:

Example
<table style="width:100%">
  <tr>
    <th>Name</th>
    <th colspan="2">Telephone</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>55577854</td>
    <td>55577855</td>
  </tr>
</table>
HTML Table - Cell that Spans Many Rows
To make a cell span more than one row, use the rowspan attribute:

Example
<table style="width:100%">
  <tr>
    <th>Name:</th>
    <td>Bill Gates</td>
  </tr>
  <tr>
    <th rowspan="2">Telephone:</th>
    <td>55577854</td>
  </tr>
  <tr>
    <td>55577855</td>
  </tr>
</table>
HTML Table - Add a Caption
To add a caption to a table, use the <caption> tag:

Example
<table style="width:100%">
  <caption>Monthly savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$50</td>
  </tr>
</table>
Note: The <caption> tag must be inserted immediately after the <table> tag.

A Special Style for One Table
To define a special style for one particular table, add an id attribute to the table:

Example
<table id="t01">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>
Now you can define a special style for this table:
#t01 {
  width: 100%;
  background-color: #f1f1c1;
}
And add more styles:
#t01 tr:nth-child(even) {
  background-color: #eee;
}
#t01 tr:nth-child(odd) {
  background-color: #fff;
}
#t01 th {
  color: white;
  background-color: black;
}
Chapter Summary
Use the HTML <table> element to define a table
Use the HTML <tr> element to define a table row
Use the HTML <td> element to define a table data
Use the HTML <th> element to define a table heading
Use the HTML <caption> element to define a table caption
Use the CSS border property to define a border
Use the CSS border-collapse property to collapse cell borders
Use the CSS padding property to add padding to cells
Use the CSS text-align property to align cell text
Use the CSS border-spacing property to set the spacing between cells
Use the colspan attribute to make a cell span many columns
Use the rowspan attribute to make a cell span many rows
Use the id attribute to uniquely define one table
HTML Exercises
Test Yourself With Exercises
Exercise:
Add a table row with two table headers.

The two table headers should have the value "Name" and "Age".

<table>
  

    

    

  

  <tr>
    <td>Jill Smith</td>
    <td>50</td>
  </tr>
</table>

Start the Exercise

HTML Table Tags
Tag	Description
<table>	Defines a table
<th>	Defines a header cell in a table
<tr>	Defines a row in a table
<td>	Defines a cell in a table
<caption>	Defines a table caption
<colgroup>	Specifies a group of one or more columns in a table for formatting
<col>	Specifies column properties for each column within a <colgroup> element
<thead>	Groups the header content in a table
<tbody>	Groups the body content in a table
<tfoot>	Groups the footer content in a table
For a complete list of all available HTML tags, visit our HTML Tag Reference.
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<!DOCTYPE html>
<html>
<head>
<style>
table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}
</style>
</head>
<body>

<h2>HTML Table</h2>

<table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
</table>

</body>
</html>
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<!DOCTYPE html>
<html>
<body>

<h2>Basic HTML Table</h2>

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
</table>

</body>
</html>



aaaa





<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
}
</style>
</head>
<body>

<h2>Table With Border</h2>

<p>Use the CSS border property to add a border to the table.</p>

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
</table>

</body>
</html>
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<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
</style>
</head>
<body>

<h2>Collapsed Borders</h2>
<p>If you want the borders to collapse into one border, add the CSS border-collapse property.</p>

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
</table>

</body>
</html>
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<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
th, td {
  padding: 15px;
}
</style>
</head>
<body>

<h2>Cellpadding</h2>
<p>Cell padding specifies the space between the cell content and its borders.</p>

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
</table>

<p><strong>Tip:</strong> Try to change the padding to 5px.</p>

</body>
</html>
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<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
th, td {
  padding: 5px;
}
th {
  text-align: left;
}
</style>
</head>
<body>

<h2>Left-align Headings</h2>
<p>To left-align the table headings, use the CSS text-align property.</p>

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
</table>

</body>
</html>
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<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  padding: 5px;
}
table {
  border-spacing: 15px;
}
</style>
</head>
<body>

<h2>Border Spacing</h2>
<p>Border spacing specifies the space between the cells.</p>

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
</table>

<p><strong>Tip:</strong> Try to change the border-spacing to 5px.</p>

</body>
</html>
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<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
th, td {
  padding: 5px;
  text-align: left;    
}
</style>
</head>
<body>

<h2>Cell that spans two columns</h2>
<p>To make a cell span more than one column, use the colspan attribute.</p>

<table style="width:100%">
  <tr>
    <th>Name</th>
    <th colspan="2">Telephone</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>55577854</td>
    <td>55577855</td>
  </tr>
</table>

</body>
</html>
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<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
th, td {
  padding: 5px;
  text-align: left;    
}
</style>
</head>
<body>

<h2>Cell that spans two rows</h2>
<p>To make a cell span more than one row, use the rowspan attribute.</p>

<table style="width:100%">
  <tr>
    <th>Name:</th>
    <td>Bill Gates</td>
  </tr>
  <tr>
    <th rowspan="2">Telephone:</th>
    <td>55577854</td>
  </tr>
  <tr>
    <td>55577855</td>
  </tr>
</table>

</body>
</html>
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<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
th, td {
  padding: 5px;
  text-align: left;
}
</style>
</head>
<body>

<h2>Table Caption</h2>
<p>To add a caption to a table, use the caption tag.</p>

<table style="width:100%">
  <caption>Monthly savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$50</td>
  </tr>
</table>

</body>
</html>
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<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
th, td {
  padding: 15px;
  text-align: left;
}
#t01 {
  width: 100%;    
  background-color: #f1f1c1;
}
</style>
</head>
<body>

<h2>Styling Tables</h2>

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
</table>
<br>

<table id="t01">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
</table>

</body>
</html>
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<!DOCTYPE html>
<html>
<head>
<style>
table {
  width:100%;
}
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
th, td {
  padding: 15px;
  text-align: left;
}
#t01 tr:nth-child(even) {
  background-color: #eee;
}
#t01 tr:nth-child(odd) {
 background-color: #fff;
}
#t01 th {
  background-color: black;
  color: white;
}
</style>
</head>
<body>

<h2>Styling Tables</h2>

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
</table>
<br>

<table id="t01">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
</table>

</body>
</html>



aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa


https://www.w3schools.com/html/html_lists.asp




HTML Lists
HTML lists allow web developers to group a set of related items in lists.

Example
An unordered HTML list:

Item
Item
Item
Item
An ordered HTML list:

First item
Second item
Third item
Fourth item
Unordered HTML List
An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.

The list items will be marked with bullets (small black circles) by default:

Example
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Ordered HTML List
An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.

The list items will be marked with numbers by default:

Example
<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
HTML Description Lists
HTML also supports description lists.

A description list is a list of terms, with a description of each term.

The <dl> tag defines the description list, the <dt> tag defines the term (name), and the <dd> tag describes each term:

Example
<dl>
  <dt>Coffee</dt>
  <dd>- black hot drink</dd>
  <dt>Milk</dt>
  <dd>- white cold drink</dd>
</dl>
HTML List Tags
Tag	Description
<ul>	Defines an unordered list
<ol>	Defines an ordered list
<li>	Defines a list item
<dl>	Defines a description list
<dt>	Defines a term in a description list
<dd>	Describes the term in a description list
For a complete list of all available HTML tags, visit our HTML Tag Reference.
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<!DOCTYPE html>
<html>
<body>

<h2>An Unordered HTML List</h2>

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>  

<h2>An Ordered HTML List</h2>

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol> 

</body>
</html>
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<!DOCTYPE html>
<html>
<body>

<h2>An ordered HTML list</h2>

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>  

</body>
</html>
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<!DOCTYPE html>
<html>
<body>

<h2>A Description List</h2>

<dl>
  <dt>Coffee</dt>
  <dd>- black hot drink</dd>
  <dt>Milk</dt>
  <dd>- white cold drink</dd>
</dl>

</body>
</html>
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HTML Unordered Lists
The HTML <ul> tag defines an unordered (bulleted) list.

Unordered HTML List
An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.

The list items will be marked with bullets (small black circles) by default:

Example
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Unordered HTML List - Choose List Item Marker
The CSS list-style-type property is used to define the style of the list item marker. It can have one of the following values:

Value	Description
disc	Sets the list item marker to a bullet (default)
circle	Sets the list item marker to a circle
square	Sets the list item marker to a square
none	The list items will not be marked
Example - Disc
<ul style="list-style-type:disc;">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
Example - Circle
<ul style="list-style-type:circle;">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
Example - Square
<ul style="list-style-type:square;">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
Example - None
<ul style="list-style-type:none;">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
Nested HTML Lists
Lists can be nested (list inside list):

Example
<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>
Note: A list item (<li>) can contain a new list, and other HTML elements, like images and links, etc.

Horizontal List with CSS
HTML lists can be styled in many different ways with CSS.

One popular way is to style a list horizontally, to create a navigation menu:

Example
<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333333;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #111111;
}
</style>
</head>
<body>

<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

</body>
</html>
Tip: You can learn much more about CSS in our CSS Tutorial.

Chapter Summary
Use the HTML <ul> element to define an unordered list
Use the CSS list-style-type property to define the list item marker
Use the HTML <li> element to define a list item
Lists can be nested
List items can contain other HTML elements
Use the CSS property float:left to display a list horizontally
HTML List Tags
Tag	Description
<ul>	Defines an unordered list
<ol>	Defines an ordered list
<li>	Defines a list item
<dl>	Defines a description list
<dt>	Defines a term in a description list
<dd>	Describes the term in a description list
For a complete list of all available HTML tags, visit our HTML Tag Reference.
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<!DOCTYPE html>
<html>
<body>

<h2>An unordered HTML list</h2>

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>  

</body>
</html>
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<!DOCTYPE html>
<html>
<body>

<h2>Unordered List with Disc Bullets</h2>

<ul style="list-style-type:disc;">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>  

</body>
</html>
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<!DOCTYPE html>
<html>
<body>

<h2>Unordered List with Circle Bullets</h2>

<ul style="list-style-type:circle;">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>  

</body>
</html>
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<!DOCTYPE html>
<html>
<body>

<h2>Unordered List with Square Bullets</h2>

<ul style="list-style-type:square;">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

</body>
</html>
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<!DOCTYPE html>
<html>
<body>

<h2>Unordered List without Bullets</h2>

<ul style="list-style-type:none;">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>  

</body>
</html>
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<!DOCTYPE html>
<html>
<body>

<h2>A Nested List</h2>
<p>Lists can be nested (list inside list):</p>

<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>

</body>
</html>
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<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333333;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #111111;
}
</style>
</head>
<body>

<h2>Navigation Menu</h2>
<p>In this example, we use CSS to style the list horizontally, to create a navigation menu:</p>

<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

</body>
</html>
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HTML Ordered Lists
The HTML <ol> tag defines an ordered list. An ordered list can be numerical or alphabetical.

Ordered HTML List
An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.

The list items will be marked with numbers by default:

Example
<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
Ordered HTML List - The Type Attribute
The type attribute of the <ol> tag, defines the type of the list item marker:

Type	Description
type="1"	The list items will be numbered with numbers (default)
type="A"	The list items will be numbered with uppercase letters
type="a"	The list items will be numbered with lowercase letters
type="I"	The list items will be numbered with uppercase roman numbers
type="i"	The list items will be numbered with lowercase roman numbers
Numbers:
<ol type="1">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
Uppercase Letters:
<ol type="A">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
Lowercase Letters:
<ol type="a">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
Uppercase Roman Numbers:
<ol type="I">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
Lowercase Roman Numbers:
<ol type="i">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
Control List Counting
By default, an ordered list will start counting from 1. If you want to start counting from a specified number, you can use the start attribute:

Example
<ol start="50">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
Nested HTML Lists
Lists can be nested (list inside list):

Example
<ol>
  <li>Coffee</li>
  <li>Tea
    <ol>
      <li>Black tea</li>
      <li>Green tea</li>
    </ol>
  </li>
  <li>Milk</li>
</ol>
Note: A list item (<li>) can contain a new list, and other HTML elements, like images and links, etc.

Chapter Summary
Use the HTML <ol> element to define an ordered list
Use the HTML type attribute to define the numbering type
Use the HTML <li> element to define a list item
Lists can be nested
List items can contain other HTML elements
HTML List Tags
Tag	Description
<ul>	Defines an unordered list
<ol>	Defines an ordered list
<li>	Defines a list item
<dl>	Defines a description list
<dt>	Defines a term in a description list
<dd>	Describes the term in a description list
For a complete list of all available HTML tags, visit our HTML Tag Reference.
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<!DOCTYPE html>
<html>
<body>

<h2>An ordered HTML list</h2>

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>  

</body>
</html>
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<!DOCTYPE html>
<html>
<body>

<h2>Ordered List with Numbers</h2>

<ol type="1">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>  

</body>
</html>
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<!DOCTYPE html>
<html>
<body>

<h2>Ordered List with Letters</h2>

<ol type="A">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>  

</body>
</html>
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<!DOCTYPE html>
<html>
<body>

<h2>Ordered List with Lowercase Letters</h2>

<ol type="a">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>  

</body>
</html>
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<!DOCTYPE html>
<html>
<body>

<h2>Ordered List with Roman Numbers</h2>

<ol type="I">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>  

</body>
</html>
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<!DOCTYPE html>
<html>
<body>

<h2>Ordered List with Lowercase Roman Numbers</h2>

<ol type="i">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>  

</body>
</html>
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<!DOCTYPE html>
<html>
<body>

<h2>The start attribute</h2>
<p>By default, an ordered list will start counting from 1. Use the start attribute to start counting from a specified number:</p>

<ol start="50">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

<ol type="I" start="50">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

</body>
</html>
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<!DOCTYPE html>
<html>
<body>

<h2>A Nested List</h2>
<p>Lists can be nested (list inside list):</p>

<ol>
  <li>Coffee</li>
  <li>Tea
    <ol>
      <li>Black tea</li>
      <li>Green tea</li>
    </ol>
  </li>
  <li>Milk</li>
</ol>

</body>
</html>
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HTML Other Lists HTML also supports description lists.

HTML Description Lists A description list is a list of terms, with a description of each term.

The <dl> tag defines the description list, the <dt> tag defines the term (name), and the <dd> tag describes each term:

Example <dl> <dt>Coffee</dt> <dd>- black hot drink</dd> <dt>Milk</dt> <dd>- white cold drink</dd> </dl> Chapter Summary Use the HTML <dl> element to define a description list Use the HTML <dt> element to define the description term Use the HTML <dd> element to describe the term in a description list HTML Exercises Test Yourself With Exercises Exercise: Add a list item with the text "Coffee" inside the <ul> element.

<ul> Coffee </ul>

Start the Exercise

HTML List Tags Tag Description <ul> Defines an unordered list <ol> Defines an ordered list <li> Defines a list item <dl> Defines a description list <dt> Defines a term in a description list <dd> Describes the term in a description list For a complete list of all available HTML tags, visit our HTML Tag Reference.

<!DOCTYPE html> <html> <body>

<h2>A Description List</h2>

<dl> <dt>Coffee</dt> <dd>- black hot drink</dd> <dt>Milk</dt> <dd>- white cold drink</dd> </dl>

</body> </html>
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HTML Block and Inline Elements Every HTML element has a default display value, depending on what type of element it is.

There are two display values: block and inline.

Block-level Elements A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can).

The <div> element is a block-level element. Example <div>Hello World</div> Here are the block-level elements in HTML:

<address><article><aside><blockquote><canvas><dd><div><dl><dt><fieldset><figcaption><figure><footer><form><h1>-<h6><header><hr><li><main><nav><noscript><ol><p><pre><section><table><tfoot><ul><video> Inline Elements An inline element does not start on a new line and it only takes up as much width as necessary.

This is a <span> element inside a paragraph.

Example <span>Hello World</span> Here are the inline elements in HTML:

<a><abbr><acronym><b><bdo><big><br><button><cite><code><dfn><em><i><img><input><kbd><label><map><object><output><q><samp><script><select><small><span><strong><sub><sup><textarea><time><tt><var> Note: An inline element cannot contain a block-level element!

The <div> Element The <div> element is often used as a container for other HTML elements.

The <div> element has no required attributes, but style, class and id are common.

When used together with CSS, the <div> element can be used to style blocks of content:

Example <div style="background-color:black;color:white;padding:20px;"> <h2>London</h2> <p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p> </div> The <span> Element The <span> element is an inline container used to mark up a part of a text, or a part of a document.

The <span> element has no required attributes, but style, class and id are common.

When used together with CSS, the <span> element can be used to style parts of the text:

Example <p>My mother has <span style="color:blue;font-weight:bold">blue</span> eyes and my father has <span style="color:darkolivegreen;font-weight:bold">dark green</span> eyes.</p> Chapter Summary There are two display values: block and inline A block-level element always starts on a new line and takes up the full width available An inline element does not start on a new line and it only takes up as much width as necessary The <div> element is a block-level and is often used as a container for other HTML elements The <span> element is an inline container used to mark up a part of a text, or a part of a document HTML Tags Tag Description <div> Defines a section in a document (block-level) <span> Defines a section in a document (inline) For a complete list of all available HTML tags, visit our HTML Tag Reference.

<!DOCTYPE html> <html> <body>

<div style="border: 1px solid black">Hello World</div>

<p>The DIV element is a block element, and will always start on a new line and take up the full width available (stretches out to the left and right as far as it can).</p>

</body> </html>
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<!DOCTYPE html> <html> <body>

<p>This is an inline span <span style="border: 1px solid black">Hello World</span> element inside a paragraph.</p>

<p>The SPAN element is an inline element, and will not start on a new line and only takes up as much width as necessary.</p>

</body> </html>
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<!DOCTYPE html> <html> <body>

<div style="background-color:black;color:white;padding:20px;"> <h2>London</h2> <p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p> <p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p> </div>

</body> </html>

aaaaaaaa <!DOCTYPE html> <html> <body>

<h1>The span element</h1>

<p>My mother has <span style="color:blue;font-weight:bold">blue</span> eyes and my father has <span style="color:darkolivegreen;font-weight:bold">dark green</span> eyes.</p>

</body> </html>
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HTML class Attribute The HTML class attribute is used to specify a class for an HTML element.

Multiple HTML elements can share the same class.

Using The class Attribute The class attribute is often used to point to a class name in a style sheet. It can also be used by a JavaScript to access and manipulate elements with the specific class name.

In the following example we have three <div> elements with a class attribute with the value of "city". All of the three <div> elements will be styled equally according to the .city style definition in the head section:

Example <!DOCTYPE html> <html> <head> <style> .city { background-color: tomato; color: white; border: 2px solid black; margin: 20px; padding: 20px; } </style> </head> <body>

<div class="city"> <h2>London</h2> <p>London is the capital of England.</p> </div>

<div class="city"> <h2>Paris</h2> <p>Paris is the capital of France.</p> </div>

<div class="city"> <h2>Tokyo</h2> <p>Tokyo is the capital of Japan.</p> </div>

</body> </html> In the following example we have two <span> elements with a class attribute with the value of "note". Both <span> elements will be styled equally according to the .note style definition in the head section:

Example <!DOCTYPE html> <html> <head> <style> .note { font-size: 120%; color: red; } </style> </head> <body>

<h1>My <span class="note">Important</span> Heading</h1> <p>This is some <span class="note">important</span> text.</p>

</body> </html> Tip: The class attribute can be used on any HTML element.

Note: The class name is case sensitive!

Tip: You can learn much more about CSS in our CSS Tutorial.

The Syntax For Class To create a class; write a period (.) character, followed by a class name. Then, define the CSS properties within curly braces {}:

Example Create a class named "city":

<!DOCTYPE html> <html> <head> <style> .city { background-color: tomato; color: white; padding: 10px; } </style> </head> <body>

<h2 class="city">London</h2> <p>London is the capital of England.</p>

<h2 class="city">Paris</h2> <p>Paris is the capital of France.</p>

<h2 class="city">Tokyo</h2> <p>Tokyo is the capital of Japan.</p>

</body> </html> Multiple Classes HTML elements can belong to more than one class.

To define multiple classes, separate the class names with a space, e.g. <div class="city main">. The element will be styled according to all the classes specified.

In the following example, the first <h2> element belongs to both the city class and also to the main class, and will get the CSS styles from both of the classes:

Example <h2 class="city main">London</h2> <h2 class="city">Paris</h2> <h2 class="city">Tokyo</h2> Different Elements Can Share Same Class Different HTML elements can point to the same class name.

In the following example, both <h2> and <p> points to the "city" class and will share the same style:

Example <h2 class="city">Paris</h2> <p class="city">Paris is the capital of France</p> Use of The class Attribute in JavaScript The class name can also be used by JavaScript to perform certain tasks for specific elements.

JavaScript can access elements with a specific class name with the getElementsByClassName() method:

Example Click on a button to hide all elements with the class name "city":

<script> function myFunction() { var x = document.getElementsByClassName("city"); for (var i = 0; i < x.length; i++) { x[i].style.display = "none"; } } </script> Don't worry if you don't understand the code in the example above.

You will learn more about JavaScript in our HTML JavaScript chapter, or you can study our JavaScript Tutorial.

Chapter Summary The HTML class attribute specifies one or more class names for an element Classes are used by CSS and JavaScript to select and access specific elements The class attribute can be used on any HTML element The class name is case sensitive Different HTML elements can point to the same class name JavaScript can access elements with a specific class name with the getElementsByClassName() method HTML Exercises Test Yourself With Exercises Exercise: Create a class selector named "special".

Add a color property with the value "blue" inside the "special" class.

<!DOCTYPE html> <html> <head> <style>

;

</style> </head> <body>

<p class="special">My paragraph</p>

</body> </html>

Start the Exercise
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<!DOCTYPE html> <html> <head> <style> .city { background-color: tomato; color: white; border: 2px solid black; margin: 20px; padding: 20px; } </style> </head> <body>

<div class="city"> <h2>London</h2> <p>London is the capital of England.</p> </div>

<div class="city"> <h2>Paris</h2> <p>Paris is the capital of France.</p> </div>

<div class="city"> <h2>Tokyo</h2> <p>Tokyo is the capital of Japan.</p> </div>

</body> </html>
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<!DOCTYPE html> <html> <head> <style> .note { font-size: 120%; color: red; } </style> </head> <body>

<h1>My <span class="note">Important</span> Heading</h1> <p>This is some <span class="note">important</span> text.</p>

</body> </html>
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<!DOCTYPE html> <html> <head> <style> .city { background-color: tomato; color: white; padding: 10px; } </style> </head> <body>

<h2>The class Attribute</h2> <p>Use CSS to style elements with the class name "city":</p>

<h2 class="city">London</h2> <p>London is the capital of England.</p>

<h2 class="city">Paris</h2> <p>Paris is the capital of France.</p>

<h2 class="city">Tokyo</h2> <p>Tokyo is the capital of Japan.</p>

</body> </html>
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<!DOCTYPE html> <html> <head> <style> .city { background-color: tomato; color: white; padding: 10px; }

.main { text-align: center; } </style> </head> <body>

<h2>Multiple Classes</h2> <p>Here, all three h2 elements belongs to the "city" class. In addition, London also belongs to the "main" class, which center-aligns the text.</p>

<h2 class="city main">London</h2> <h2 class="city">Paris</h2> <h2 class="city">Tokyo</h2>

</body> </html>
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<!DOCTYPE html> <html> <head> <style> .city { background-color: tomato; color: white; padding: 10px; } </style> </head> <body>

<h2>Different Elements Can Share Same Class</h2>

<p>Even if the two elements do not have the same tag name, they can both point to the same class, and get the same CSS styling:</p>

<h2 class="city">Paris</h2> <p class="city">Paris is the capital of France.</p>

</body> </html>
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<!DOCTYPE html> <html> <body>

<h2>Use of The class Attribute in JavaScript</h2> <p>Click the button to hide all elements with class name "city":</p>

<button onclick="myFunction()">Hide elements</button>

<h2 class="city">London</h2> <p>London is the capital of England.</p>

<h2 class="city">Paris</h2> <p>Paris is the capital of France.</p>

<h2 class="city">Tokyo</h2> <p>Tokyo is the capital of Japan.</p>

<script> function myFunction() { var x = document.getElementsByClassName("city"); for (var i = 0; i < x.length; i++) { x[i].style.display = "none"; } } </script>

</body> </html>
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HTML id Attribute The HTML id attribute is used to specify a unique id for an HTML element.

You cannot have more than one element with the same id in an HTML document.

Using The id Attribute The id attribute specifies a unique id for an HTML element. The value of the id attribute must be unique within the HTML document.

The id attribute is used to point to a specific style declaration in a style sheet. It is also used by JavaScript to access and manipulate the element with the specific id.

The syntax for id is: write a hash character (#), followed by an id name. Then, define the CSS properties within curly braces {}.

In the following example we have an <h1> element that points to the id name "myHeader". This <h1> element will be styled according to the #myHeader style definition in the head section:

Example <!DOCTYPE html> <html> <head> <style>

myHeader {
background-color: lightblue; color: black; padding: 40px; text-align: center; } </style> </head> <body>

<h1 id="myHeader">My Header</h1>

</body> </html> Note: The id name is case sensitive!

Note: The id name must contain at least one character, and must not contain whitespaces (spaces, tabs, etc.).

Difference Between Class and ID A class name can be used by multiple HTML elements, while an id name must only be used by one HTML element within the page:

Example <style> /* Style the element with the id "myHeader" */

myHeader {
background-color: lightblue; color: black; padding: 40px; text-align: center; }

/* Style all elements with the class name "city" */ .city { background-color: tomato; color: white; padding: 10px; } </style>

<!-- An element with a unique id --> <h1 id="myHeader">My Cities</h1>

<!-- Multiple elements with same class --> <h2 class="city">London</h2> <p>London is the capital of England.</p>

<h2 class="city">Paris</h2> <p>Paris is the capital of France.</p>

<h2 class="city">Tokyo</h2> <p>Tokyo is the capital of Japan.</p> Tip: You can learn much more about CSS in our CSS Tutorial.

HTML Bookmarks with ID and Links HTML bookmarks are used to allow readers to jump to specific parts of a webpage.

Bookmarks can be useful if your page is very long.

To use a bookmark, you must first create it, and then add a link to it.

Then, when the link is clicked, the page will scroll to the location with the bookmark.

Example First, create a bookmark with the id attribute:

<h2 id="C4">Chapter 4</h2> Then, add a link to the bookmark ("Jump to Chapter 4"), from within the same page:

Example <a href="#C4">Jump to Chapter 4</a> Or, add a link to the bookmark ("Jump to Chapter 4"), from another page:

<a href="html_demo.html#C4">Jump to Chapter 4</a> Using The id Attribute in JavaScript The id attribute can also be used by JavaScript to perform some tasks for that specific element.

JavaScript can access an element with a specific id with the getElementById() method:

Example Use the id attribute to manipulate text with JavaScript:

<script> function displayResult() { document.getElementById("myHeader").innerHTML = "Have a nice day!"; } </script> Tip: Study JavaScript in the HTML JavaScript chapter, or in our JavaScript Tutorial.

Chapter Summary The id attribute is used to specify a unique id for an HTML element The value of the id attribute must be unique within the HTML document The id attribute is used by CSS and JavaScript to style/select a specific element The value of the id attribute is case sensitive The id attribute is also used to create HTML bookmarks JavaScript can access an element with a specific id with the getElementById() method HTML Exercises Test Yourself With Exercises Exercise: Add the correct HTML attribute to make the H1 element red.

<!DOCTYPE html> <html> <head> <style>

myheader {color:red;}
</style> </head> <body>

<h1 >My Home Page</h1>

</body> </html>

Start the Exercise
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<!DOCTYPE html> <html> <head> <style>

myHeader {
background-color: lightblue; color: black; padding: 40px; text-align: center; } </style> </head> <body>

<h2>The id Attribute</h2> <p>Use CSS to style an element with the id "myHeader":</p>

<h1 id="myHeader">My Header</h1>

</body> </html>
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<!DOCTYPE html> <html> <head> <style> /* Style the element with the id "myHeader" */

myHeader {
background-color: lightblue; color: black; padding: 40px; text-align: center; }

/* Style all elements with the class name "city" */ .city { background-color: tomato; color: white; padding: 10px; } </style> </head> <body>

<h2>Difference Between Class and ID</h2> <p>A class name can be used by multiple HTML elements, while an id name must only be used by one HTML element within the page:</p>

<!-- An element with a unique id --> <h1 id="myHeader">My Cities</h1>

<!-- Multiple elements with same class --> <h2 class="city">London</h2> <p>London is the capital of England.</p>

<h2 class="city">Paris</h2> <p>Paris is the capital of France.</p>

<h2 class="city">Tokyo</h2> <p>Tokyo is the capital of Japan.</p>

</body> </html>
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<!DOCTYPE html> <html> <body>

<p><a href="#C4">Jump to Chapter 4</a></p> <p><a href="#C10">Jump to Chapter 10</a></p>

<h2>Chapter 1</h2> <p>This chapter explains ba bla bla</p>

<h2>Chapter 2</h2> <p>This chapter explains ba bla bla</p>

<h2>Chapter 3</h2> <p>This chapter explains ba bla bla</p>

<h2 id="C4">Chapter 4</h2> <p>This chapter explains ba bla bla</p>

<h2>Chapter 5</h2> <p>This chapter explains ba bla bla</p>

<h2>Chapter 6</h2> <p>This chapter explains ba bla bla</p>

<h2>Chapter 7</h2> <p>This chapter explains ba bla bla</p>

<h2>Chapter 8</h2> <p>This chapter explains ba bla bla</p>

<h2>Chapter 9</h2> <p>This chapter explains ba bla bla</p>

<h2 id="C10">Chapter 10</h2> <p>This chapter explains ba bla bla</p>

<h2>Chapter 11</h2> <p>This chapter explains ba bla bla</p>

<h2>Chapter 12</h2> <p>This chapter explains ba bla bla</p>

<h2>Chapter 13</h2> <p>This chapter explains ba bla bla</p>

<h2>Chapter 14</h2> <p>This chapter explains ba bla bla</p>

<h2>Chapter 15</h2> <p>This chapter explains ba bla bla</p>

<h2>Chapter 16</h2> <p>This chapter explains ba bla bla</p>

<h2>Chapter 17</h2> <p>This chapter explains ba bla bla</p>

<h2>Chapter 18</h2> <p>This chapter explains ba bla bla</p>

<h2>Chapter 19</h2> <p>This chapter explains ba bla bla</p>

<h2>Chapter 20</h2> <p>This chapter explains ba bla bla</p>

<h2>Chapter 21</h2> <p>This chapter explains ba bla bla</p>

<h2>Chapter 22</h2> <p>This chapter explains ba bla bla</p>

<h2>Chapter 23</h2> <p>This chapter explains ba bla bla</p>

</body> </html>
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<!DOCTYPE html> <html> <body>

<h2>Using The id Attribute in JavaScript</h2> <p>JavaScript can access an element with a specified id by using the getElementById() method:</p>

<h1 id="myHeader">Hello World!</h1> <button onclick="displayResult()">Change text</button>

<script> function displayResult() { document.getElementById("myHeader").innerHTML = "Have a nice day!"; } </script>

</body> </html>
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HTML Iframes An HTML iframe is used to display a web page within a web page.

HTML Iframe Syntax The HTML <iframe> tag specifies an inline frame.

An inline frame is used to embed another document within the current HTML document.

Syntax <iframe src="url" title="description"> Tip: It is a good practice to always include a title attribute for the <iframe>. This is used by screen readers to read out what the content of the iframe is.

Iframe - Set Height and Width Use the height and width attributes to specify the size of the iframe.

The height and width are specified in pixels by default:

Example <iframe src="demo_iframe.htm" height="200" width="300" title="Iframe Example"></iframe> Or you can add the style attribute and use the CSS height and width properties:

Example <iframe src="demo_iframe.htm" style="height:200px;width:300px;" title="Iframe Example"></iframe> Iframe - Remove the Border By default, an iframe has a border around it.

To remove the border, add the style attribute and use the CSS border property:

Example <iframe src="demo_iframe.htm" style="border:none;" title="Iframe Example"></iframe> With CSS, you can also change the size, style and color of the iframe's border:

Example <iframe src="demo_iframe.htm" style="border:2px solid red;" title="Iframe Example"></iframe> Iframe - Target for a Link An iframe can be used as the target frame for a link.

The target attribute of the link must refer to the name attribute of the iframe:

Example <iframe src="demoiframe.htm" name="iframea" title="Iframe Example"></iframe>

<p><a href="https://www.w3schools.com" target="iframe_a">W3Schools.com</a></p> Chapter Summary The HTML <iframe> tag specifies an inline frame The src attribute defines the URL of the page to embed Always include a title attribute (for screen readers) The height and width attributes specifies the size of the iframe Use border:none; to remove the border around the iframe HTML Exercises Test Yourself With Exercises Exercise: Create an iframe with a URL address that goes to https://www.w3schools.com.

<iframe ="https://www.w3schools.com"></iframe>

Start the Exercise

HTML iframe Tag Tag Description <iframe> Defines an inline frame For a complete list of all available HTML tags, visit our HTML Tag Reference.
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<!DOCTYPE html> <html> <body>

<h2>HTML Iframes</h2> <p>You can use the height and width attributes to specify the size of the iframe:</p>

<iframe src="demo_iframe.htm" height="200" width="300" title="Iframe Example"></iframe>

</body> </html>
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<!DOCTYPE html> <html> <body>

<h2>HTML Iframes</h2> <p>You can also use the CSS height and width properties to specify the size of the iframe:</p>

<iframe src="demo_iframe.htm" style="height:200px;width:300px" title="Iframe Example"></iframe>

</body> </html>
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<!DOCTYPE html> <html> <body>

<h2>Remove the Iframe Border</h2> <p>To remove the default border of the iframe, use CSS:</p>

<iframe src="demo_iframe.htm" style="border:none;" title="Iframe Example"></iframe>

</body> </html>
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<!DOCTYPE html> <html> <body>

<h2>Custom Iframe Border</h2> <p>With CSS, you can also change the size, style and color of the iframe's border:</p>

<iframe src="demo_iframe.htm" style="border:2px solid red;" title="Iframe Example"></iframe>

</body> </html>
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<!DOCTYPE html> <html> <body>

<h2>Iframe - Target for a Link</h2>

<iframe src="demoiframe.htm" name="iframea" height="300px" width="100%" title="Iframe Example"></iframe>

<p><a href="https://www.w3schools.com" target="iframe_a">W3Schools.com</a></p>

<p>When the target attribute of a link matches the name of an iframe, the link will open in the iframe.</p>

</body> </html>
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HTML JavaScript JavaScript makes HTML pages more dynamic and interactive.

Example My First JavaScript Click me to display Date and Time

The HTML <script> Tag The HTML <script> tag is used to define a client-side script (JavaScript).

The <script> element either contains script statements, or it points to an external script file through the src attribute.

Common uses for JavaScript are image manipulation, form validation, and dynamic changes of content.

To select an HTML element, JavaScript most often uses the document.getElementById() method.

This JavaScript example writes "Hello JavaScript!" into an HTML element with id="demo":

Example <script> document.getElementById("demo").innerHTML = "Hello JavaScript!"; </script> Tip: You can learn much more about JavaScript in our JavaScript Tutorial.

A Taste of JavaScript Here are some examples of what JavaScript can do:

Example JavaScript can change content:

document.getElementById("demo").innerHTML = "Hello JavaScript!"; Example JavaScript can change styles:

document.getElementById("demo").style.fontSize = "25px"; document.getElementById("demo").style.color = "red"; document.getElementById("demo").style.backgroundColor = "yellow"; Example JavaScript can change attributes:

document.getElementById("image").src = "picture.gif";

The HTML <noscript> Tag The HTML <noscript> tag defines an alternate content to be displayed to users that have disabled scripts in their browser or have a browser that doesn't support scripts:

Example <script> document.getElementById("demo").innerHTML = "Hello JavaScript!"; </script> <noscript>Sorry, your browser does not support JavaScript!</noscript> HTML Exercises Test Yourself With Exercises Exercise: Use JavaScript to change the HTML content of the <p> element to "Hello World!".

<body>

<p id="demo">Hi.</p>

<script> document. ("demo").innerHTML = "Hello World!"; </script>

</body>

Start the Exercise

HTML Script Tags Tag Description <script> Defines a client-side script <noscript> Defines an alternate content for users that do not support client-side scripts For a complete list of all available HTML tags, visit our HTML Tag Reference.
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<!DOCTYPE html> <html> <body>

<h1>My First JavaScript</h1>

<button type="button" onclick="document.getElementById('demo').innerHTML = Date()"> Click me to display Date and Time.</button>

<p id="demo"></p>

</body> </html>
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<!DOCTYPE html> <html> <body>

<h2>Use JavaScript to Change Text</h2> <p>This example writes "Hello JavaScript!" into an HTML element with id="demo":</p>

<p id="demo"></p>

<script> document.getElementById("demo").innerHTML = "Hello JavaScript!"; </script>

</body> </html>

aaaaaaaa <!DOCTYPE html> <html> <body>

<h1>My First JavaScript</h1>

<p>JavaScript can change the content of an HTML element:</p>

<button type="button" onclick="myFunction()">Click Me!</button>

<p id="demo">This is a demonstration.</p>

<script> function myFunction() { document.getElementById("demo").innerHTML = "Hello JavaScript!"; } </script>

</body> </html>

aaaaaa <!DOCTYPE html> <html> <body>

<h1>My First JavaScript</h1>

<p id="demo">JavaScript can change the style of an HTML element.</p>

<script> function myFunction() { document.getElementById("demo").style.fontSize = "25px"; document.getElementById("demo").style.color = "red"; document.getElementById("demo").style.backgroundColor = "yellow";
} </script>

<button type="button" onclick="myFunction()">Click Me!</button>

</body> </html>
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<!DOCTYPE html> <html> <body>

<h1>My First JavaScript</h1> <p>Here, a JavaScript changes the value of the src (source) attribute of an image.</p>

<script> function light(sw) { var pic; if (sw == 0) { pic = "picbulboff.gif" } else { pic = "picbulbon.gif" } document.getElementById('myImage').src = pic; } </script>

<img id="myImage" src="pic_bulboff.gif" width="100" height="180">

<p> <button type="button" onclick="light(1)">Light On</button> <button type="button" onclick="light(0)">Light Off</button> </p>

</body> </html>
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<!DOCTYPE html> <html> <body>

<p id="demo"></p>

<script> document.getElementById("demo").innerHTML = "Hello JavaScript!"; </script>

<noscript>Sorry, your browser does not support JavaScript!</noscript>

<p>A browser without support for JavaScript will show the text written inside the noscript element.</p>

</body> </html>
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HTML File Paths A file path describes the location of a file in a web site's folder structure.

File Path Examples Path Description <img src="picture.jpg"> The "picture.jpg" file is located in the same folder as the current page <img src="images/picture.jpg"> The "picture.jpg" file is located in the images folder in the current folder <img src="/images/picture.jpg"> The "picture.jpg" file is located in the images folder at the root of the current web <img src="../picture.jpg"> The "picture.jpg" file is located in the folder one level up from the current folder HTML File Paths A file path describes the location of a file in a web site's folder structure.

File paths are used when linking to external files, like:

Web pages Images Style sheets JavaScripts Absolute File Paths An absolute file path is the full URL to a file:

Example <img src="https://www.w3schools.com/images/picture.jpg" alt="Mountain">

The <img> tag is explained in the chapter: HTML Images.

Relative File Paths A relative file path points to a file relative to the current page.

In the following example, the file path points to a file in the images folder located at the root of the current web:

Example <img src="/images/picture.jpg" alt="Mountain">

In the following example, the file path points to a file in the images folder located in the current folder:

Example <img src="images/picture.jpg" alt="Mountain">

In the following example, the file path points to a file in the images folder located in the folder one level up from the current folder:

Example <img src="../images/picture.jpg" alt="Mountain">

Best Practice It is best practice to use relative file paths (if possible).

When using relative file paths, your web pages will not be bound to your current base URL. All links will work on your own computer (localhost) as well as on your current public domain and your future public domains.
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<!DOCTYPE html> <html> <body>

<h2>Using a Full URL File Path</h2> <img src="https://www.w3schools.com/images/picture.jpg" alt="Mountain" style="width:300px">

</body> </html>
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<!DOCTYPE html> <html> <body>

<h2>Using a Relative File Path</h2> <img src="/images/picture.jpg" alt="Mountain" style="width:300px">

</body> </html>
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<!DOCTYPE html> <html> <body>

<h2>Using a Relative File Path</h2> <img src="/images/picture.jpg" alt="Mountain" style="width:300px">

</body> </html>
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<!DOCTYPE html> <html> <body>

<h2>Using a Relative File Path</h2> <img src="images/picture.jpg" alt="Mountain" style="width:300px">

</body> </html>
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<!DOCTYPE html> <html> <body>

<h2>Using a Relative File Path</h2> <img src="../images/picture.jpg" alt="Mountain" style="width:300px">

</body> </html>
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HTML - The Head Element The HTML <head> element is a container for the following elements: <title>, <style>, <meta>, <link>, <script>, and <base>.

The HTML <head> Element The <head> element is a container for metadata (data about data) and is placed between the <html> tag and the <body> tag.

HTML metadata is data about the HTML document. Metadata is not displayed.

Metadata typically define the document title, character set, styles, scripts, and other meta information.

The HTML <title> Element The <title> element defines the title of the document. The title must be text-only, and it is shown in the browser's title bar or in the page's tab.

The <title> element is required in HTML documents!

The contents of a page title is very important for search engine optimization (SEO)! The page title is used by search engine algorithms to decide the order when listing pages in search results.

The <title> element:

defines a title in the browser toolbar provides a title for the page when it is added to favorites displays a title for the page in search engine-results So, try to make the title as accurate and meaningful as possible!

A simple HTML document:

Example <!DOCTYPE html> <html> <head> <title>A Meaningful Page Title</title> </head> <body>

The content of the document……

</body> </html> The HTML <style> Element The <style> element is used to define style information for a single HTML page:

Example <style> body {background-color: powderblue;} h1 {color: red;} p {color: blue;} </style>

The HTML <link> Element The <link> element defines the relationship between the current document and an external resource.

The <link> tag is most often used to link to external style sheets:

Example <link rel="stylesheet" href="mystyle.css"> Tip: To learn all about CSS, visit our CSS Tutorial.

The HTML <meta> Element The <meta> element is typically used to specify the character set, page description, keywords, author of the document, and viewport settings.

The metadata will not be displayed on the page, but are used by browsers (how to display content or reload page), by search engines (keywords), and other web services.

Examples Define the character set used:

<meta charset="UTF-8"> Define keywords for search engines:

<meta name="keywords" content="HTML, CSS, JavaScript"> Define a description of your web page:

<meta name="description" content="Free Web tutorials"> Define the author of a page:

<meta name="author" content="John Doe"> Refresh document every 30 seconds:

<meta http-equiv="refresh" content="30"> Setting the viewport to make your website look good on all devices:

<meta name="viewport" content="width=device-width, initial-scale=1.0"> Example of <meta> tags:

Example <meta charset="UTF-8"> <meta name="description" content="Free Web tutorials"> <meta name="keywords" content="HTML, CSS, JavaScript"> <meta name="author" content="John Doe"> Setting The Viewport The viewport is the user's visible area of a web page. It varies with the device - it will be smaller on a mobile phone than on a computer screen.

You should include the following <meta> element in all your web pages:

<meta name="viewport" content="width=device-width, initial-scale=1.0"> This gives the browser instructions on how to control the page's dimensions and scaling.

The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device).

The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.

Here is an example of a web page without the viewport meta tag, and the same web page with the viewport meta tag:

Tip: If you are browsing this page with a phone or a tablet, you can click on the two links below to see the difference.

Without the viewport meta tag

With the viewport meta tag

The HTML <script> Element The <script> element is used to define client-side JavaScripts.

The following JavaScript writes "Hello JavaScript!" into an HTML element with id="demo":

Example <script> function myFunction() { document.getElementById("demo").innerHTML = "Hello JavaScript!"; } </script> Tip: To learn all about JavaScript, visit our JavaScript Tutorial.

The HTML <base> Element The <base> element specifies the base URL and/or target for all relative URLs in a page.

The <base> tag must have either an href or a target attribute present, or both.

There can only be one single <base> element in a document!

Example Specify a default URL and a default target for all links on a page:

<head> <base href="https://www.w3schools.com/" target="_blank"> </head>

<body> <img src="images/stickman.gif" width="24" height="39" alt="Stickman"> <a href="tags/tag_base.asp">HTML base Tag</a> </body> Chapter Summary The <head> element is a container for metadata (data about data) The <head> element is placed between the <html> tag and the <body> tag The <title> element is required and it defines the title of the document The <style> element is used to define style information for a single document The <link> tag is most often used to link to external style sheets The <meta> element is typically used to specify the character set, page description, keywords, author of the document, and viewport settings The <script> element is used to define client-side JavaScripts The <base> element specifies the base URL and/or target for all relative URLs in a page HTML head Elements Tag Description <head> Defines information about the document <title> Defines the title of a document <base> Defines a default address or a default target for all links on a page <link> Defines the relationship between a document and an external resource <meta> Defines metadata about an HTML document <script> Defines a client-side script <style> Defines style information for a document For a complete list of all available HTML tags, visit our HTML Tag Reference.
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<!DOCTYPE html> <html> <head> <title>A Meaningful Page Title</title> </head> <body>

<p>The content of the body element is displayed in the browser window.</p> <p>The content of the title element is displayed in the browser tab, in favorites and in search-engine results.</p>

</body> </html>
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<!DOCTYPE html> <html> <head> <title>Page Title</title> <style> body {background-color: powderblue;} h1 {color: red;} p {color: blue;} </style> </head>
<body>

<h1>This is a Heading</h1> <p>This is a paragraph.</p>

</body> </html>
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<!DOCTYPE html> <html> <head> <title>Page Title</title> <link rel="stylesheet" href="mystyle.css"> </head> <body>

<h1>This is a Heading</h1> <p>This is a paragraph.</p>

</body> </html>

aaaaaaaaaaaaaaaa <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="description" content="Free Web tutorials"> <meta name="keywords" content="HTML, CSS, JavaScript"> <meta name="author" content="John Doe"> </head> <body>

<p>All meta information goes inside the head section.</p>

</body> </html>

aaaaaaaaaaaaaaaaaaaaaa <!DOCTYPE html> <html> <head> <title>Page Title</title> <script> function myFunction() { document.getElementById("demo").innerHTML = "Hello JavaScript!"; } </script> </head> <body>

<h1>My Web Page</h1> <p id="demo">A Paragraph</p> <button type="button" onclick="myFunction()">Try it</button>

</body> </html>
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<!DOCTYPE html> <html> <head> <base href="https://www.w3schools.com/" target="_blank"> </head> <body>

<h1>The base element</h1>

<p><img src="images/stickman.gif" width="24" height="39" alt="Stickman"> - Notice that we have only specified a relative address for the image. Since we have specified a base URL in the head section, the browser will look for the image at "https://www.w3schools.com/images/stickman.gif".</p>

<p><a href="tags/tagbase.asp">HTML base tag</a> - Notice that the link opens in a new window, even if it has no target="blank" attribute. This is because the target attribute of the base element is set to "_blank".</p>

</body> </html>
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w3schools.comLOG INTHE WORLD'S LARGEST WEB DEVELOPER SITE HTML Tutorial HTML HOME HTML Introduction HTML Editors HTML Basic HTML Elements HTML Attributes HTML Headings HTML Paragraphs HTML Styles HTML Formatting HTML Quotations HTML Comments HTML Colors HTML CSS HTML Links HTML Images HTML Tables HTML Lists HTML Block & Inline HTML Classes HTML Id HTML Iframes HTML JavaScript HTML File Paths HTML Head HTML Layout HTML Responsive HTML Computercode HTML Semantics HTML Style Guide HTML Entities HTML Symbols HTML Emojis HTML Charset HTML URL Encode HTML vs. XHTML

HTML Forms HTML Forms HTML Form Attributes HTML Form Elements HTML Input Types HTML Input Attributes HTML Input Form Attributes

HTML Graphics HTML Canvas HTML SVG

HTML Media HTML Media HTML Video HTML Audio HTML Plug-ins HTML YouTube

HTML APIs HTML Geolocation HTML Drag/Drop HTML Web Storage HTML Web Workers HTML SSE

HTML Examples HTML Examples HTML Quiz HTML Exercises HTML Certificate HTML Summary HTML Accessibility

HTML References HTML Tag List HTML Attributes HTML Global Attributes HTML Browser Support HTML Events HTML Colors HTML Canvas HTML Audio/Video HTML Doctypes HTML Character Sets HTML URL Encode HTML Lang Codes HTTP Messages HTTP Methods PX to EM Converter Keyboard Shortcuts

HTML Layout Elements and Techniques Websites often display content in multiple columns (like a magazine or a newspaper).

Example Cities London Paris Tokyo London London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.

Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.

Footer

HTML Layout Elements HTML has several semantic elements that define the different parts of a web page:

HTML5 Semantic Elements
<header> - Defines a header for a document or a section <nav> - Defines a set of navigation links <section> - Defines a section in a document <article> - Defines an independent, self-contained content <aside> - Defines content aside from the content (like a sidebar) <footer> - Defines a footer for a document or a section <details> - Defines additional details that the user can open and close on demand <summary> - Defines a heading for the <details> element You can read more about semantic elements in our HTML Semantics chapter.

HTML Layout Techniques There are four different techniques to create multicolumn layouts. Each technique has its pros and cons:

CSS framework CSS float property CSS flexbox CSS grid

CSS Frameworks If you want to create your layout fast, you can use a CSS framework, like W3.CSS or Bootstrap.

CSS Float Layout It is common to do entire web layouts using the CSS float property. Float is easy to learn - you just need to remember how the float and clear properties work. Disadvantages: Floating elements are tied to the document flow, which may harm the flexibility. Learn more about float in our CSS Float and Clear chapter.

Example Cities London Paris Tokyo London London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.

Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.

Footer

CSS Flexbox Layout Use of flexbox ensures that elements behave predictably when the page layout must accommodate different screen sizes and different display devices.

Learn more about flexbox in our CSS Flexbox chapter.

Example Cities London Paris Tokyo London London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.

Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.

Footer

CSS Grid Layout The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and positioning.

Learn more about CSS grids in our CSS Grid View chapter.
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<!DOCTYPE html> <html lang="en"> <head> <title>CSS Template</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style>

{ box-sizing: border-box; }
body { font-family: Arial, Helvetica, sans-serif; }

/* Style the header */ header { background-color: #666; padding: 30px; text-align: center; font-size: 35px; color: white; }

/* Create two columns/boxes that floats next to each other / nav { float: left; width: 30%; height: 300px; / only for demonstration, should be removed */ background: #ccc; padding: 20px; }

/* Style the list inside the menu */ nav ul { list-style-type: none; padding: 0; }

article { float: left; padding: 20px; width: 70%; background-color: #f1f1f1; height: 300px; /* only for demonstration, should be removed */ }

/* Clear floats after the columns */ section:after { content: ""; display: table; clear: both; }

/* Style the footer */ footer { background-color: #777; padding: 10px; text-align: center; color: white; }

/* Responsive layout - makes the two columns/boxes stack on top of each other instead of next to each other, on small screens */ @media (max-width: 600px) { nav, article { width: 100%; height: auto; } } </style> </head> <body>

<h2>CSS Layout Float</h2> <p>In this example, we have created a header, two columns/boxes and a footer. On smaller screens, the columns will stack on top of each other.</p> <p>Resize the browser window to see the responsive effect (you will learn more about this in our next chapter - HTML Responsive.)</p>

<header> <h2>Cities</h2> </header>

<section> <nav> <ul> <li><a href="#">London</a></li> <li><a href="#">Paris</a></li> <li><a href="#">Tokyo</a></li> </ul> </nav>

<article> <h1>London</h1> <p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p> <p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p> </article> </section>

<footer> <p>Footer</p> </footer>

</body> </html>
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<!DOCTYPE html> <html lang="en"> <head> <title>CSS Template</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style>

{ box-sizing: border-box; }
body { font-family: Arial, Helvetica, sans-serif; }

/* Style the header */ header { background-color: #666; padding: 30px; text-align: center; font-size: 35px; color: white; }

/* Create two columns/boxes that floats next to each other / nav { float: left; width: 30%; height: 300px; / only for demonstration, should be removed */ background: #ccc; padding: 20px; }

/* Style the list inside the menu */ nav ul { list-style-type: none; padding: 0; }

article { float: left; padding: 20px; width: 70%; background-color: #f1f1f1; height: 300px; /* only for demonstration, should be removed */ }

/* Clear floats after the columns */ section:after { content: ""; display: table; clear: both; }

/* Style the footer */ footer { background-color: #777; padding: 10px; text-align: center; color: white; }

/* Responsive layout - makes the two columns/boxes stack on top of each other instead of next to each other, on small screens */ @media (max-width: 600px) { nav, article { width: 100%; height: auto; } } </style> </head> <body>

<h2>CSS Layout Float</h2> <p>In this example, we have created a header, two columns/boxes and a footer. On smaller screens, the columns will stack on top of each other.</p> <p>Resize the browser window to see the responsive effect (you will learn more about this in our next chapter - HTML Responsive.)</p>

<header> <h2>Cities</h2> </header>

<section> <nav> <ul> <li><a href="#">London</a></li> <li><a href="#">Paris</a></li> <li><a href="#">Tokyo</a></li> </ul> </nav>

<article> <h1>London</h1> <p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p> <p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p> </article> </section>

<footer> <p>Footer</p> </footer>

</body> </html>
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<!DOCTYPE html> <html lang="en"> <head> <title>CSS Template</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style>

{ box-sizing: border-box; }
body { font-family: Arial, Helvetica, sans-serif; }

/* Style the header */ header { background-color: #666; padding: 30px; text-align: center; font-size: 35px; color: white; }

/* Container for flexboxes */ section { display: -webkit-flex; display: flex; }

/* Style the navigation menu */ nav { -webkit-flex: 1; -ms-flex: 1; flex: 1; background: #ccc; padding: 20px; }

/* Style the list inside the menu */ nav ul { list-style-type: none; padding: 0; }

/* Style the content */ article { -webkit-flex: 3; -ms-flex: 3; flex: 3; background-color: #f1f1f1; padding: 10px; }

/* Style the footer */ footer { background-color: #777; padding: 10px; text-align: center; color: white; }

/* Responsive layout - makes the menu and the content (inside the section) sit on top of each other instead of next to each other */ @media (max-width: 600px) { section { -webkit-flex-direction: column; flex-direction: column; } } </style> </head> <body>

<h2>CSS Layout Flexbox</h2> <p>In this example, we have created a header, two columns/boxes and a footer. On smaller screens, the columns will stack on top of each other.</p> <p>Resize the browser window to see the responsive effect.</p> <p><strong>Note:</strong> Flexbox is not supported in Internet Explorer 10 and earlier versions.</p>

<header> <h2>Cities</h2> </header>

<section> <nav> <ul> <li><a href="#">London</a></li> <li><a href="#">Paris</a></li> <li><a href="#">Tokyo</a></li> </ul> </nav>

<article> <h1>London</h1> <p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p> <p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p> </article> </section>

<footer> <p>Footer</p> </footer>

</body> </html>
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w3schools.comLOG INTHE WORLD'S LARGEST WEB DEVELOPER SITE HTML Tutorial HTML HOME HTML Introduction HTML Editors HTML Basic HTML Elements HTML Attributes HTML Headings HTML Paragraphs HTML Styles HTML Formatting HTML Quotations HTML Comments HTML Colors HTML CSS HTML Links HTML Images HTML Tables HTML Lists HTML Block & Inline HTML Classes HTML Id HTML Iframes HTML JavaScript HTML File Paths HTML Head HTML Layout HTML Responsive HTML Computercode HTML Semantics HTML Style Guide HTML Entities HTML Symbols HTML Emojis HTML Charset HTML URL Encode HTML vs. XHTML

HTML Forms HTML Forms HTML Form Attributes HTML Form Elements HTML Input Types HTML Input Attributes HTML Input Form Attributes

HTML Graphics HTML Canvas HTML SVG

HTML Media HTML Media HTML Video HTML Audio HTML Plug-ins HTML YouTube

HTML APIs HTML Geolocation HTML Drag/Drop HTML Web Storage HTML Web Workers HTML SSE

HTML Examples HTML Examples HTML Quiz HTML Exercises HTML Certificate HTML Summary HTML Accessibility

HTML References HTML Tag List HTML Attributes HTML Global Attributes HTML Browser Support HTML Events HTML Colors HTML Canvas HTML Audio/Video HTML Doctypes HTML Character Sets HTML URL Encode HTML Lang Codes HTTP Messages HTTP Methods PX to EM Converter Keyboard Shortcuts

HTML Responsive Web Design Responsive web design is about creating web pages that look good on all devices!

A responsive web design will automatically adjust for different screen sizes and viewports.

Responsive Web Design What is Responsive Web Design? Responsive Web Design is about using HTML and CSS to automatically resize, hide, shrink, or enlarge, a website, to make it look good on all devices (desktops, tablets, and phones):

Setting The Viewport To create a responsive website, add the following <meta> tag to all your web pages:

Example <meta name="viewport" content="width=device-width, initial-scale=1.0"> This will set the viewport of your page, which will give the browser instructions on how to control the page's dimensions and scaling.

Here is an example of a web page without the viewport meta tag, and the same web page with the viewport meta tag:

Without the viewport meta tag: With the viewport meta tag:

Tip: If you are browsing this page on a phone or a tablet, you can click on the two links above to see the difference.

Responsive Images Responsive images are images that scale nicely to fit any browser size.

Using the width Property If the CSS width property is set to 100%, the image will be responsive and scale up and down:

Example <img src="img_girl.jpg" style="width:100%;"> Notice that in the example above, the image can be scaled up to be larger than its original size. A better solution, in many cases, will be to use the max-width property instead.

Using the max-width Property If the max-width property is set to 100%, the image will scale down if it has to, but never scale up to be larger than its original size:

Example <img src="img_girl.jpg" style="max-width:100%;height:auto;"> Show Different Images Depending on Browser Width The HTML <picture> element allows you to define different images for different browser window sizes.

Resize the browser window to see how the image below change depending on the width:

Flowers Example <picture> <source srcset="imgsmallflower.jpg" media="(max-width: 600px)"> <source srcset="imgflowers.jpg" media="(max-width: 1500px)"> <source srcset="flowers.jpg"> <img src="img_smallflower.jpg" alt="Flowers"> </picture> Responsive Text Size The text size can be set with a "vw" unit, which means the "viewport width".

That way the text size will follow the size of the browser window:

Hello World Resize the browser window to see how the text size scales.

Example <h1 style="font-size:10vw">Hello World</h1> Viewport is the browser window size. 1vw = 1% of viewport width. If the viewport is 50cm wide, 1vw is 0.5cm.

Media Queries In addition to resize text and images, it is also common to use media queries in responsive web pages.

With media queries you can define completely different styles for different browser sizes.

Example: resize the browser window to see that the three div elements below will display horizontally on large screens and stacked vertically on small screens:

Left Menu

Main Content

Right Content

Example <style> .left, .right { float: left; width: 20%; /* The width is 20%, by default */ }

.main { float: left; width: 60%; /* The width is 60%, by default */ }

/* Use a media query to add a breakpoint at 800px: / @media screen and (max-width: 800px) { .left, .main, .right { width: 100%; / The width is 100%, when the viewport is 800px or smaller */ } } </style> Tip: To learn more about Media Queries and Responsive Web Design, read our RWD Tutorial.

Responsive Web Page - Full Example A responsive web page should look good on large desktop screens and on small mobile phones.

Responsive Web Design - Frameworks All popular CSS Frameworks offer responsive design.

They are free, and easy to use.

W3.CSS W3.CSS is a modern CSS framework with support for desktop, tablet, and mobile design by default.

W3.CSS is smaller and faster than similar CSS frameworks.

W3.CSS is designed to be a high quality alternative to Bootstrap.

W3.CSS is designed to be independent of jQuery or any other JavaScript library.

W3.CSS Demo Resize the page to see the responsiveness!

London London is the capital city of England.

It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.

Paris Paris is the capital of France.

The Paris area is one of the largest population centers in Europe, with more than 12 million inhabitants.

Tokyo Tokyo is the capital of Japan.

It is the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.

Example <!DOCTYPE html> <html> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> <body>

<div class="w3-container w3-green"> <h1>W3Schools Demo</h1> <p>Resize this responsive page!</p> </div>

<div class="w3-row-padding"> <div class="w3-third"> <h2>London</h2> <p>London is the capital city of England.</p> <p>It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p> </div>

<div class="w3-third"> <h2>Paris</h2> <p>Paris is the capital of France.</p> <p>The Paris area is one of the largest population centers in Europe, with more than 12 million inhabitants.</p> </div>

<div class="w3-third"> <h2>Tokyo</h2> <p>Tokyo is the capital of Japan.</p> <p>It is the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.</p> </div> </div>

</body> </html> To learn more about W3.CSS, read our W3.CSS Tutorial.

Bootstrap Another popular CSS framework is Bootstrap. Bootstrap uses HTML, CSS and jQuery to make responsive web pages.

Example <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> </head> <body>

<div class="container"> <div class="jumbotron"> <h1>My First Bootstrap Page</h1> </div> <div class="row"> <div class="col-sm-4"> … </div> <div class="col-sm-4"> … </div> <div class="col-sm-4"> … </div> </div> </div>

</body> </html> To learn more about Bootstrap, go to our Bootstrap Tutorial.
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<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style>

{ box-sizing: border-box; } .menu { float: left; width: 20%; } .menuitem { padding: 8px; margin-top: 7px; border-bottom: 1px solid #f1f1f1; } .main { float: left; width: 60%; padding: 0 20px; overflow: hidden; } .right { background-color: lightblue; float: left; width: 20%; padding: 10px 15px; margin-top: 7px; }
@media only screen and (max-width:800px) { /* For tablets: / .main { width: 80%; padding: 0; } .right { width: 100%; } } @media only screen and (max-width:500px) { / For mobile phones: */ .menu, .main, .right { width: 100%; } } </style> </head> <body style="font-family:Verdana;">

<div style="background-color:#f1f1f1;padding:15px;"> <h1>Cinque Terre</h1> <h3>Resize the browser window</h3> </div>

<div style="overflow:auto"> <div class="menu"> <div class="menuitem">The Walk</div> <div class="menuitem">Transport</div> <div class="menuitem">History</div> <div class="menuitem">Gallery</div> </div>

<div class="main"> <h2>The Walk</h2> <p>The walk from Monterosso to Riomaggiore will take you approximately two hours, give or take an hour depending on the weather conditions and your physical shape.</p> <img src="img_5terre.jpg" style="width:100%"> </div>

<div class="right"> <h2>What?</h2> <p>Cinque Terre comprises five villages: Monterosso, Vernazza, Corniglia, Manarola, and Riomaggiore.</p> <h2>Where?</h2> <p>On the northwest cost of the Italian Riviera, north of the city La Spezia.</p> <h2>Price?</h2> <p>The Walk is free!</p> </div> </div>

<div style="background-color:#f1f1f1;text-align:center;padding:10px;margin-top:7px;font-size:12px;"> This web page is a part of a demonstration of fluid web design made by w3schools.com. Resize the browser window to see the content respond to the resizing.</div>

</body> </html>
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<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body>

<h2>Setting the Viewport</h2> <p>This example does not really do anything, other than showing you how to add the viewport meta element.</p>

</body> </html>
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<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body>

<h2>Responsive Image</h2> <p>When the CSS width property is set in a percentage value, the image will scale up and down when resizing the browser window. Resize the browser window to see the effect.</p>

<img src="img_girl.jpg" style="width:100%;">

</body> </html>
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<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body>

<h2>Responsive Image</h2> <p>"max-width:100%" prevents the image from getting bigger than its original size. However, if you make the browser window smaller, the image will still scale down.</p> <p>Resize the browser window to see the effect.</p>

<img src="img_girl.jpg" style="max-width:100%;height:auto;">

</body> </html>
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<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body>

<h2>Show Different Images Depending on Browser Width</h2> <p>Resize the browser width and the image will change at 600px and 1500px.</p>

<picture> <source srcset="imgsmallflower.jpg" media="(max-width: 600px)"> <source srcset="imgflowers.jpg" media="(max-width: 1500px)"> <source srcset="flowers.jpg"> <img src="img_flowers.jpg" alt="Flowers" style="width:auto;"> </picture>

</body> </html>
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<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body>

<h1 style="font-size:10vw;">Responsive Text</h1>

<p style="font-size:5vw;">Resize the browser window to see how the text size scales.</p>

<p style="font-size:5vw;">Use the "vw" unit when sizing the text. 10vw will set the size to 10% of the viewport width.</p>

<p>Viewport is the browser window size. 1vw = 1% of viewport width. If the viewport is 50cm wide, 1vw is 0.5cm.</p>

</body> </html>
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<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style>

{ box-sizing:border-box; }
.left { background-color:#2196F3; padding:20px; float:left; width:20%; /* The width is 20%, by default */ }

.main { background-color:#f1f1f1; padding:20px; float:left; width:60%; /* The width is 60%, by default */ }

.right { background-color:#4CAF50; padding:20px; float:left; width:20%; /* The width is 20%, by default */ }

/* Use a media query to add a break point at 800px: / @media screen and (max-width:800px) { .left, .main, .right { width:100%; / The width is 100%, when the viewport is 800px or smaller */ } } </style> </head> <body>

<h2>Media Queries</h2> <p>Resize the browser window.</p>

<p>Make sure you reach the breakpoint at 800px when resizing this frame.</p>

<div class="left"> <p>Left Menu</p> </div>

<div class="main"> <p>Main Content</p> </div>

<div class="right"> <p>Right Content</p> </div>

</body> </html>
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<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style>

{ box-sizing: border-box; } .menu { float:left; width:20%; text-align:center; } .menu a { background-color:#e5e5e5; padding:8px; margin-top:7px; display:block; width:100%; color:black; } .main { float:left; width:60%; padding:0 20px; } .right { background-color:#e5e5e5; float:left; width:20%; padding:15px; margin-top:7px; text-align:center; }
@media only screen and (max-width:620px) { /* For mobile phones: */ .menu, .main, .right { width:100%; } } </style> </head> <body style="font-family:Verdana;color:#aaaaaa;">

<div style="background-color:#e5e5e5;padding:15px;text-align:center;"> <h1>Hello World</h1> </div>

<div style="overflow:auto"> <div class="menu"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> <a href="#">Link 4</a> </div>

<div class="main"> <h2>Lorum Ipsum</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> </div>

<div class="right"> <h2>About</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> </div> </div>

<div style="background-color:#e5e5e5;text-align:center;padding:10px;margin-top:7px;">© copyright w3schools.com</div>

</body> </html>
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<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> </head> <body>

<div class="container"> <div class="jumbotron"> <h1>My First Bootstrap Page</h1> <p>Resize this responsive page to see the effect!</p> </div> <div class="row"> <div class="col-sm-4"> <h3>Column 1</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit…</p> <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris…</p> </div> <div class="col-sm-4"> <h3>Column 2</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit…</p> <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris…</p> </div> <div class="col-sm-4"> <h3>Column 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit…</p> <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris…</p> </div> </div> </div>

</body> </html>
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HTML Computer Code Elements HTML contains several elements for defining user input and computer code.

Example <code> x = 5; y = 6; z = x + y; </code> HTML <kbd> For Keyboard Input The HTML <kbd> element is used to define keyboard input. The content inside is displayed in the browser's default monospace font.

Example Define some text as keyboard input in a document:

<p>Save the document by pressing <kbd>Ctrl + S</kbd></p> Result:

Save the document by pressing Ctrl + S HTML <samp> For Program Output The HTML <samp> element is used to define sample output from a computer program. The content inside is displayed in the browser's default monospace font.

Example Define some text as sample output from a computer program in a document:

<p>Message from my computer:</p> <p><samp>File not found.<br>Press F1 to continue</samp></p> Result:

Message from my computer: File not found. Press F1 to continue

HTML <code> For Computer Code The HTML <code> element is used to define a piece of computer code. The content inside is displayed in the browser's default monospace font.

Example Define some text as computer code in a document:

<code> x = 5; y = 6; z = x + y; </code> Result:

x = 5; y = 6; z = x + y; Notice that the <code> element does not preserve extra whitespace and line-breaks.

To fix this, you can put the <code> element inside a <pre> element:

Example <pre> <code> x = 5; y = 6; z = x + y; </code> </pre> Result:

x = 5; y = 6; z = x + y; HTML <var> For Variables The HTML <var> element is used to define a variable in programming or in a mathematical expression. The content inside is typically displayed in italic.

Example Define some text as variables in a document:

<p>The area of a triangle is: 1/2 x <var>b</var> x <var>h</var>, where <var>b</var> is the base, and <var>h</var> is the vertical height.</p> Result:

The area of a triangle is: 1/2 x b x h, where b is the base, and h is the vertical height. Chapter Summary The <kbd> element is used to define keyboard input The <samp> element is used to define sample output from a computer program The <code> element is used to define a piece of computer code The <var> element is used to defines a variable in programming or in a mathematical expression The <pre> element is used to define preformatted text HTML Exercises Test Yourself With Exercises Exercise: Define the text "var person;" as programming code.

<p>Code example: var person; </p>

Start the Exercise

HTML Computer Code Elements Tag Description <code> Defines programming code <kbd> Defines keyboard input <samp> Defines computer output <var> Defines a variable <pre> Defines preformatted text For a complete list of all available HTML tags, visit our HTML Tag Reference.
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<!DOCTYPE html> <html> <body>

<h2>Computer Code</h2> <p>Some programming code:</p>

<code> x = 5; y = 6; z = x + y; </code>

</body> </html>
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<!DOCTYPE html> <html> <body>

<h2>The kbd Element</h2>

<p>The kbd element is used to define keyboard input:</p>

<p>Save the document by pressing <kbd>Ctrl + S</kbd></p>

</body> </html>
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<!DOCTYPE html> <html> <body>

<h2>The samp Element</h2>

<p>The samp element is used to define sample output from a computer program.</p>

<p>Message from my computer:</p> <p><samp>File not found.<br>Press F1 to continue</samp></p>

</body> </html>
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<!DOCTYPE html> <html> <body>

<h2>The code Element</h2> <p>Programming code example:</p>

<code> x = 5; y = 6; z = x + y; </code>

</body> </html>
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<!DOCTYPE html> <html> <body>

<p>The code element does not preserve whitespace and line-breaks.</p> <p>To fix this, you can put the code element inside a pre element:</p>

<pre> <code> x = 5; y = 6; z = x + y; </code> </pre>

</body> </html>
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<!DOCTYPE html> <html> <body>

<h2>The var Element</h2>

<p>The area of a triangle is: 1/2 x <var>b</var> x <var>h</var>, where <var>b</var> is the base, and <var>h</var> is the vertical height.</p>

</body> </html>
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HTML Semantic Elements Semantic elements = elements with a meaning.

What are Semantic Elements? A semantic element clearly describes its meaning to both the browser and the developer.

Examples of non-semantic elements: <div> and <span> - Tells nothing about its content.

Examples of semantic elements: <form>, <table>, and <article> - Clearly defines its content.

Semantic Elements in HTML Many web sites contain HTML code like: <div id="nav"> <div class="header"> <div id="footer"> to indicate navigation, header, and footer.

In HTML there are some semantic elements that can be used to define different parts of a web page:

<article> <aside> <details> <figcaption> <figure> <footer> <header> <main> <mark> <nav> <section> <summary> <time> HTML Semantic Elements HTML <section> Element The <section> element defines a section in a document.

According to W3C's HTML documentation: "A section is a thematic grouping of content, typically with a heading."

A web page could normally be split into sections for introduction, content, and contact information.

Example Two sections in a document:

<section> <h1>WWF</h1> <p>The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.</p> </section>

<section> <h1>WWF's Panda symbol</h1> <p>The Panda has become the symbol of WWF. The well-known panda logo of WWF originated from a panda named Chi Chi that was transferred from the Beijing Zoo to the London Zoo in the same year of the establishment of WWF.</p> </section>

HTML <article> Element The <article> element specifies independent, self-contained content.

An article should make sense on its own, and it should be possible to distribute it independently from the rest of the web site.

Examples of where an <article> element can be used:

Forum post Blog post Newspaper article Example Three articles with independent, self-contained content:

<article> <h2>Google Chrome</h2> <p>Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser today!</p> </article>

<article> <h2>Mozilla Firefox</h2> <p>Mozilla Firefox is an open-source web browser developed by Mozilla. Firefox has been the second most popular web browser since January, 2018.</p> </article>

<article> <h2>Microsoft Edge</h2> <p>Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge replaced Internet Explorer.</p> </article> Example 2 Use CSS to style the <article> element:

<html> <head> <style> .all-browsers { margin: 0; padding: 5px; background-color: lightgray; }

.all-browsers > h1, .browser { margin: 10px; padding: 5px; }

.browser { background: white; }

.browser > h2, p { margin: 4px; font-size: 90%; } </style> </head> <body>

<article class="all-browsers"> <h1>Most Popular Browsers</h1> <article class="browser"> <h2>Google Chrome</h2> <p>Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser today!</p> </article> <article class="browser"> <h2>Mozilla Firefox</h2> <p>Mozilla Firefox is an open-source web browser developed by Mozilla. Firefox has been the second most popular web browser since January, 2018.</p> </article> <article class="browser"> <h2>Microsoft Edge</h2> <p>Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge replaced Internet Explorer.</p> </article> </article>

</body> </html> Nesting <article> in <section> or Vice Versa? The <article> element specifies independent, self-contained content.

The <section> element defines section in a document.

Can we use the definitions to decide how to nest those elements? No, we cannot!

So, you will find HTML pages with <section> elements containing <article> elements, and <article> elements containing <section> elements.

HTML <header> Element The <header> element represents a container for introductory content or a set of navigational links.

A <header> element typically contains:

one or more heading elements (<h1> - <h6>) logo or icon authorship information Note: You can have several <header> elements in one HTML document. However, <header> cannot be placed within a <footer>, <address> or another <header> element.

Example A header for an <article>:

<article> <header> <h1>What Does WWF Do?</h1> <p>WWF's mission:</p> </header> <p>WWF's mission is to stop the degradation of our planet's natural environment, and build a future in which humans live in harmony with nature.</p> </article> HTML <footer> Element The <footer> element defines a footer for a document or section.

A <footer> element typically contains:

authorship information copyright information contact information sitemap back to top links related documents You can have several <footer> elements in one document.

Example A footer section in a document:

<footer> <p>Author: Hege Refsnes</p> <p><a href="mailto:hege@example.com">hege@example.com</a></p> </footer> HTML <nav> Element The <nav> element defines a set of navigation links.

Notice that NOT all links of a document should be inside a <nav> element. The <nav> element is intended only for major block of navigation links.

Browsers, such as screen readers for disabled users, can use this element to determine whether to omit the initial rendering of this content.

Example A set of navigation links:

<nav> <a href="/html/">HTML</a> | <a href="/css/">CSS</a> | <a href="/js/">JavaScript</a> | <a href="/jquery/">jQuery</a> </nav> HTML <aside> Element The <aside> element defines some content aside from the content it is placed in (like a sidebar).

The <aside> content should be indirectly related to the surrounding content.

Example Display some content aside from the content it is placed in:

<p>My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!</p>

<aside> <h4>Epcot Center</h4> <p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p> </aside> Example 2 Use CSS to style the <aside> element:

<html> <head> <style> aside { width: 30%; padding-left: 15px; margin-left: 15px; float: right; font-style: italic; background-color: lightgray; } </style> </head> <body>

<p>My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!</p>

<aside> <p>The Epcot center is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p> </aside>

<p>My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!</p> <p>My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!</p>

</body> </html> HTML <figure> and <figcaption> Elements The <figure> tag specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.

The <figcaption> tag defines a caption for a <figure> element. The <figcaption> element can be placed as the first or as the last child of a <figure> element.

The <img> element defines the actual image/illustration.

Example <figure> <img src="pic_trulli.jpg" alt="Trulli"> <figcaption>Fig1. - Trulli, Puglia, Italy.</figcaption> </figure> Why Semantic Elements? According to the W3C: "A semantic Web allows data to be shared and reused across applications, enterprises, and communities."

Semantic Elements in HTML Below is a list of some of the semantic elements in HTML.

Tag Description <article> Defines independent, self-contained content <aside> Defines content aside from the page content <details> Defines additional details that the user can view or hide <figcaption> Defines a caption for a <figure> element <figure> Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc. <footer> Defines a footer for a document or section <header> Specifies a header for a document or section <main> Specifies the main content of a document <mark> Defines marked/highlighted text <nav> Defines navigation links <section> Defines a section in a document <summary> Defines a visible heading for a <details> element <time> Defines a date/time For a complete list of all available HTML tags, visit our HTML Tag Reference.
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<!DOCTYPE html> <html> <body>

<section> <h1>WWF</h1> <p>The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.</p> </section>

<section> <h1>WWF's Panda symbol</h1> <p>The Panda has become the symbol of WWF. The well-known panda logo of WWF originated from a panda named Chi Chi that was transferred from the Beijing Zoo to the London Zoo in the same year of the establishment of WWF.</p> </section>

</body> </html> aaaaaaa

<!DOCTYPE html> <html> <body>

<h1>The article element</h1>

<article> <h2>Google Chrome</h2> <p>Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser today!</p> </article>

<article> <h2>Mozilla Firefox</h2> <p>Mozilla Firefox is an open-source web browser developed by Mozilla. Firefox has been the second most popular web browser since January, 2018.</p> </article>

<article> <h2>Microsoft Edge</h2> <p>Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge replaced Internet Explorer.</p> </article>

</body> </html>
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<!DOCTYPE html> <html> <head> <style> .all-browsers { margin: 0; padding: 5px; background-color: lightgray; }

.all-browsers > h1, .browser { margin: 10px; padding: 5px; }

.browser { background: white; }

.browser > h2, p { margin: 4px; font-size: 90%; } </style> </head> <body>

<article class="all-browsers"> <h1>Most Popular Browsers</h1> <article class="browser"> <h2>Google Chrome</h2> <p>Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser today!</p> </article> <article class="browser"> <h2>Mozilla Firefox</h2> <p>Mozilla Firefox is an open-source web browser developed by Mozilla. Firefox has been the second most popular web browser since January, 2018.</p> </article> <article class="browser"> <h2>Microsoft Edge</h2> <p>Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge replaced Internet Explorer.</p> </article> </article>

</body> </html>
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<!DOCTYPE html> <html> <head> <style> .all-browsers { margin: 0; padding: 5px; background-color: lightgray; }

.all-browsers > h1, .browser { margin: 10px; padding: 5px; }

.browser { background: white; }

.browser > h2, p { margin: 4px; font-size: 90%; } </style> </head> <body>

<article class="all-browsers"> <h1>Most Popular Browsers</h1> <article class="browser"> <h2>Google Chrome</h2> <p>Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser today!</p> </article> <article class="browser"> <h2>Mozilla Firefox</h2> <p>Mozilla Firefox is an open-source web browser developed by Mozilla. Firefox has been the second most popular web browser since January, 2018.</p> </article> <article class="browser"> <h2>Microsoft Edge</h2> <p>Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge replaced Internet Explorer.</p> </article> </article>

</body> </html>
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<!DOCTYPE html> <html> <body>

<article> <header> <h1>What Does WWF Do?</h1> <p>WWF's mission:</p> </header> <p>WWF's mission is to stop the degradation of our planet's natural environment, and build a future in which humans live in harmony with nature.</p> </article>

</body> </html>
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<!DOCTYPE html> <html> <body>

<footer> <p>Author: Hege Refsnes</p> <p><a href="mailto:hege@example.com">hege@example.com</a></p> </footer>

</body> </html>

aaaaaaaaa

<!DOCTYPE html> <html> <body>

<nav> <a href="/html/">HTML</a> | <a href="/css/">CSS</a> | <a href="/js/">JavaScript</a> | <a href="/jquery/">jQuery</a> </nav>

</body> </html> aaaaa

<!DOCTYPE html> <html> <body>

<p>My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!</p>

<aside> <h4>Epcot Center</h4> <p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p> </aside>

</body> </html>

aaaaaaaaa

<!DOCTYPE html> <html> <head> <style> aside { width: 30%; padding-left: 15px; margin-left: 15px; float: right; font-style: italic; background-color: lightgray; } </style> </head> <body>

<p>My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!</p>

<aside> <p>The Epcot center is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p> </aside>

<p>My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!</p> <p>My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!</p>

</body> </html>

aaaaaa

<!DOCTYPE html> <html> <body>

<h2>Places to Visit</h2>

<p>Puglia's most famous sight is the unique conical houses (Trulli) found in the area around Alberobello, a declared UNESCO World Heritage Site.</p>

<figure> <img src="pic_trulli.jpg" alt="Trulli" style="width:100%"> <figcaption>Fig.1 - Trulli, Puglia, Italy.</figcaption> </figure>

</body> </html>
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HTML Style Guide and Coding Conventions A consistent, clean, and tidy HTML code makes it easier for others to read and understand your code.

Here are some guidelines and tips for creating good HTML code.

Always Declare Document Type Always declare the document type as the first line in your document.

The correct document type for HTML is:

<!DOCTYPE html> Use Lowercase Element Names HTML allows mixing uppercase and lowercase letters in element names.

However, we recommend using lowercase element names, because:

Mixing uppercase and lowercase names looks bad Developers normally use lowercase names Lowercase looks cleaner Lowercase is easier to write Good: <body> <p>This is a paragraph.</p> </body> Bad: <BODY> <P>This is a paragraph.</P> </BODY>

Close All HTML Elements In HTML, you do not have to close all elements (for example the <p> element).

However, we strongly recommend closing all HTML elements, like this:

Good: <section> <p>This is a paragraph.</p> <p>This is a paragraph.</p> </section> Bad: <section> <p>This is a paragraph. <p>This is a paragraph. </section> Use Lowercase Attribute Names HTML allows mixing uppercase and lowercase letters in attribute names.

However, we recommend using lowercase attribute names, because:

Mixing uppercase and lowercase names looks bad Developers normally use lowercase names Lowercase look cleaner Lowercase are easier to write Good: <a href="https://www.w3schools.com/html/">Visit our HTML tutorial</a> Bad: <a HREF="https://www.w3schools.com/html/">Visit our HTML tutorial</a> Always Quote Attribute Values HTML allows attribute values without quotes.

However, we recommend quoting attribute values, because:

Developers normally quote attribute values Quoted values are easier to read You MUST use quotes if the value contains spaces Good: <table class="striped"> Bad: <table class=striped> Very bad: This will not work, because the value contains spaces:

<table class=table striped> Always Specify alt, width, and height for Images Always specify the alt attribute for images. This attribute is important if the image for some reason cannot be displayed.

Also, always define the width and height of images. This reduces flickering, because the browser can reserve space for the image before loading.

Good: <img src="html5.gif" alt="HTML5" style="width:128px;height:128px"> Bad: <img src="html5.gif"> Spaces and Equal Signs HTML allows spaces around equal signs. But space-less is easier to read and groups entities better together.

Good: <link rel="stylesheet" href="styles.css"> Bad: <link rel = "stylesheet" href = "styles.css"> Avoid Long Code Lines When using an HTML editor, it is NOT convenient to scroll right and left to read the HTML code.

Try to avoid too long code lines.

Blank Lines and Indentation Do not add blank lines, spaces, or indentations without a reason.

For readability, add blank lines to separate large or logical code blocks.

For readability, add two spaces of indentation. Do not use the tab key.

Good: <body>

<h1>Famous Cities</h1>

<h2>Tokyo</h2> <p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area, and the most populous metropolitan area in the world. It is the seat of the Japanese government and the Imperial Palace, and the home of the Japanese Imperial Family.</p>

</body> Bad: <body>

<h1>Famous Cities</h1>

<h2>Tokyo</h2>

<p> Tokyo is the capital of Japan, the center of the Greater Tokyo Area, and the most populous metropolitan area in the world. It is the seat of the Japanese government and the Imperial Palace, and the home of the Japanese Imperial Family. </p>

</body> Good Table Example: <table> <tr> <th>Name</th> <th>Description</th> </tr> <tr> <td>A</td> <td>Description of A</td> </tr> <tr> <td>B</td> <td>Description of B</td> </tr> </table> Good List Example: <ul> <li>London</li> <li>Paris</li> <li>Tokyo</li> </ul> Never Skip the <title> Element The <title> element is required in HTML.

The contents of a page title is very important for search engine optimization (SEO)! The page title is used by search engine algorithms to decide the order when listing pages in search results.

The <title> element:

defines a title in the browser toolbar provides a title for the page when it is added to favorites displays a title for the page in search-engine results So, try to make the title as accurate and meaningful as possible:

<title>HTML Style Guide and Coding Conventions</title> Omitting <html> and <body>? An HTML page will validate without the <html> and <body> tags:

Example <!DOCTYPE html> <head> <title>Page Title</title> </head>

<h1>This is a heading</h1> <p>This is a paragraph.</p> However, we strongly recommend to always add the <html> and <body> tags!

Omitting <body> can produce errors in older browsers.

Omitting <html> and <body> can also crash DOM and XML software.

Omitting <head>? The HTML <head> tag can also be omitted.

Browsers will add all elements before <body>, to a default <head> element.

Example <!DOCTYPE html> <html> <title>Page Title</title> <body>

<h1>This is a heading</h1> <p>This is a paragraph.</p>

</body> </html> However, we recommend using the <head> tag.

Close Empty HTML Elements? In HTML, it is optional to close empty elements.

Allowed: <meta charset="utf-8"> Also Allowed: <meta charset="utf-8" /> If you expect XML/XHTML software to access your page, keep the closing slash (/), because it is required in XML and XHTML.

Add the lang Attribute You should always include the lang attribute inside the <html> tag, to declare the language of the Web page. This is meant to assist search engines and browsers.

Example <!DOCTYPE html> <html lang="en-us"> <head> <title>Page Title</title> </head> <body>

<h1>This is a heading</h1> <p>This is a paragraph.</p>

</body> </html> Meta Data To ensure proper interpretation and correct search engine indexing, both the language and the character encoding <meta charset="charset"> should be defined as early as possible in an HTML document:

<!DOCTYPE html> <html lang="en-us"> <head> <meta charset="UTF-8"> <title>Page Title</title> </head> Setting The Viewport The viewport is the user's visible area of a web page. It varies with the device - it will be smaller on a mobile phone than on a computer screen.

You should include the following <meta> element in all your web pages:

<meta name="viewport" content="width=device-width, initial-scale=1.0"> This gives the browser instructions on how to control the page's dimensions and scaling.

The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device).

The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.

Here is an example of a web page without the viewport meta tag, and the same web page with the viewport meta tag:

Tip: If you are browsing this page with a phone or a tablet, you can click on the two links below to see the difference.

Without the viewport meta tag

With the viewport meta tag

HTML Comments Short comments should be written on one line, like this:

<!-- This is a comment --> Comments that spans more than one line, should be written like this:

<!-- This is a long comment example. This is a long comment example. This is a long comment example. This is a long comment example. --> Long comments are easier to observe if they are indented with two spaces.

Using Style Sheets Use simple syntax for linking to style sheets (the type attribute is not necessary):

<link rel="stylesheet" href="styles.css"> Short CSS rules can be written compressed, like this:

p.intro {font-family:Verdana;font-size:16em;} Long CSS rules should be written over multiple lines:

body { background-color: lightgrey; font-family: "Arial Black", Helvetica, sans-serif; font-size: 16em; color: black; } Place the opening bracket on the same line as the selector Use one space before the opening bracket Use two spaces of indentation Use semicolon after each property-value pair, including the last Only use quotes around values if the value contains spaces Place the closing bracket on a new line, without leading spaces Loading JavaScript in HTML Use simple syntax for loading external scripts (the type attribute is not necessary):

<script src="myscript.js"> Accessing HTML Elements with JavaScript Using "untidy" HTML code can result in JavaScript errors.

These two JavaScript statements will produce different results:

Example getElementById("Demo").innerHTML = "Hello";

getElementById("demo").innerHTML = "Hello"; Visit the JavaScript Style Guide.

Use Lower Case File Names Some web servers (Apache, Unix) are case sensitive about file names: "london.jpg" cannot be accessed as "London.jpg".

Other web servers (Microsoft, IIS) are not case sensitive: "london.jpg" can be accessed as "London.jpg".

If you use a mix of uppercase and lowercase, you have to be aware of this.

If you move from a case-insensitive to a case-sensitive server, even small errors will break your web!

To avoid these problems, always use lowercase file names!

File Extensions HTML files should have a .html extension (.htm is allowed).

CSS files should have a .css extension.

JavaScript files should have a .js extension.

Differences Between .htm and .html? There is no difference between the .htm and .html file extensions!

Both will be treated as HTML by any web browser and web server.

Default Filenames When a URL does not specify a filename at the end (like "https://www.w3schools.com/"), the server just adds a default filename, such as "index.html", "index.htm", "default.html", or "default.htm".

If your server is configured only with "index.html" as the default filename, your file must be named "index.html", and not "default.html."

However, servers can be configured with more than one default filename; usually you can set up as many default filenames as you want.
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<!DOCTYPE html> <head> <title>Page Title</title> </head>

<h1>This is a heading</h1> <p>This is a paragraph.</p>

aaaaaaaaa

<!DOCTYPE html> <html> <title>Page Title</title> <body>

<h1>This is a heading</h1> <p>This is a paragraph.</p>

</body> </html>

aaaaa<!DOCTYPE html> <html lang="en-us"> <head> <title>Page Title</title> </head> <body>

<h1>This is a heading</h1> <p>This is a paragraph.</p>

</body> </html>

aaaaaaa

<!DOCTYPE html> <html> <body>

<p id="Demo">This is paragraph 1.</p> <p id="demo">This is paragraph 2.</p>

<script> // Only paragraph 2 will be overwritten document.getElementById("demo").innerHTML = "HELLO."; </script>

</body> </html>
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HTML Entities Reserved characters in HTML must be replaced with character entities.

HTML Entities Some characters are reserved in HTML.

If you use the less than (<) or greater than (>) signs in your text, the browser might mix them with tags.

Character entities are used to display reserved characters in HTML.

A character entity looks like this:

&entity_name; OR

&#entity_number; To display a less than sign (<) we must write: < or <

Advantage of using an entity name: An entity name is easy to remember. Disadvantage of using an entity name: Browsers may not support all entity names, but the support for entity numbers is good.

Non-breaking Space A commonly used entity in HTML is the non-breaking space:  

A non-breaking space is a space that will not break into a new line.

Two words separated by a non-breaking space will stick together (not break into a new line). This is handy when breaking the words might be disruptive.

Examples:

§ 10 10 km/h 10 PM Another common use of the non-breaking space is to prevent browsers from truncating spaces in HTML pages.

If you write 10 spaces in your text, the browser will remove 9 of them. To add real spaces to your text, you can use the   character entity.

Tip: The non-breaking hyphen (‑) is used to define a hyphen character (‑) that does not break into a new line.

Some Useful HTML Character Entities Result Description Entity Name Entity Number non-breaking space     < less than < < > greater than > > & ampersand & & " double quotation mark " " ' single quotation mark (apostrophe) ' ' ¢ cent ¢ ¢ £ pound £ £ ¥ yen ¥ ¥ € euro € € © copyright © © ® registered trademark ® ® Note: Entity names are case sensitive.

Combining Diacritical Marks A diacritical mark is a "glyph" added to a letter.

Some diacritical marks, like grave ( ̀) and acute ( ́) are called accents.

Diacritical marks can appear both above and below a letter, inside a letter, and between two letters.

Diacritical marks can be used in combination with alphanumeric characters to produce a character that is not present in the character set (encoding) used in the page.

Here are some examples:

Mark Character Construct Result ̀ a à à ́ a á á ̂ a â â ̃ a ã ã ̀ O Ò Ò ́ O Ó Ó ̂ O Ô Ô ̃ O Õ Õ You will see more HTML symbols in the next chapter of this tutorial.
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HTML Symbols Symbols that are not present on your keyboard can also be added by using entities.

HTML Symbol Entities HTML entities were described in the previous chapter.

Many mathematical, technical, and currency symbols, are not present on a normal keyboard.

To add such symbols to an HTML page, you can use the entity name or the entity number (a decimal or a hexadecimal reference) for the symbol.

Example Display the euro sign, €, with an entity name, a decimal, and a hexadecimal value:

<p>I will display €</p> <p>I will display €</p> <p>I will display €</p> Will display as: I will display € I will display € I will display € Some Mathematical Symbols Supported by HTML Char Number Entity Description ∀ ∀ ∀ FOR ALL ∂ ∂ ∂ PARTIAL DIFFERENTIAL ∃ ∃ ∃ THERE EXISTS ∅ ∅ ∅ EMPTY SETS ∇ ∇ ∇ NABLA ∈ ∈ ∈ ELEMENT OF ∉ ∉ ∉ NOT AN ELEMENT OF ∋ ∋ ∋ CONTAINS AS MEMBER ∏ ∏ ∏ N-ARY PRODUCT ∑ ∑ ∑ N-ARY SUMMATION Full Math Reference

Some Greek Letters Supported by HTML Char Number Entity Description Α Α Α GREEK CAPITAL LETTER ALPHA Β Β Β GREEK CAPITAL LETTER BETA Γ Γ Γ GREEK CAPITAL LETTER GAMMA Δ Δ Δ GREEK CAPITAL LETTER DELTA Ε Ε Ε GREEK CAPITAL LETTER EPSILON Ζ Ζ Ζ GREEK CAPITAL LETTER ZETA Full Greek Reference

Some Other Entities Supported by HTML Char Number Entity Description © © © COPYRIGHT SIGN ® ® ® REGISTERED SIGN € € € EURO SIGN ™ ™ ™ TRADEMARK ← ← ← LEFTWARDS ARROW ↑ ↑ ↑ UPWARDS ARROW → → → RIGHTWARDS ARROW ↓ ↓ ↓ DOWNWARDS ARROW ♠ ♠ ♠ BLACK SPADE SUIT ♣ ♣ ♣ BLACK CLUB SUIT ♥ ♥ ♥ BLACK HEART SUIT ♦ ♦ ♦ BLACK DIAMOND SUIT Full Currency Reference

Full Arrows Reference

Full Symbols Reference
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<!DOCTYPE html> <html> <body>

<p>I will display €</p> <p>I will display €</p> <p>I will display €</p>

</body> </html>
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Using Emojis in HTML Emojis are characters from the UTF-8 character set: 😄 😍 💗

What are Emojis? Emojis look like images, or icons, but they are not.

They are letters (characters) from the UTF-8 (Unicode) character set.

UTF-8 covers almost all of the characters and symbols in the world.

The HTML charset Attribute To display an HTML page correctly, a web browser must know the character set used in the page.

This is specified in the <meta> tag:

<meta charset="UTF-8"> If not specified, UTF-8 is the default character set in HTML.

UTF-8 Characters Many UTF-8 characters cannot be typed on a keyboard, but they can always be displayed using numbers (called entity numbers):

A is 65 B is 66 C is 67 Example <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body>

<p>I will display A B C</p> <p>I will display A B C</p>

</body> </html> Example Explained The <meta charset="UTF-8"> element defines the character set.

The characters A, B, and C, are displayed by the numbers 65, 66, and 67.

To let the browser understand that you are displaying a character, you must start the entity number with &# and end it with ; (semicolon).

Emoji Characters Emojis are also characters from the UTF-8 alphabet:

😄 is 128516 😍 is 128525 💗 is 128151 Example <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body>

<h1>My First Emoji</h1>

<p>😀</p>

</body> </html> Since Emojis are characters, they can be copied, displayed, and sized just like any other character in HTML.

Example <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body>

<h1>Sized Emojis</h1>

<p style="font-size:48px"> 😀 😄 😍 💗 </p>

</body> </html>

Some Emoji Symbols in UTF-8 Emoji Value 🗻 🗻 🗼 🗼 🗽 🗽 🗾 🗾 🗿 🗿 😀 😀 😁 😁 😂 😂 😃 😃 😄 😄 😅 😅 For a full list, please go to our HTML Emoji Reference.
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<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body>

<p>I will display A B C</p> <p>I will display A B C</p>

</body> </html>
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<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body>

<h1>My First Emoji</h1>

<p>😀</p>

</body> </html>

aaaaaaaaaaaaaaaa

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body>

<h1>Sized Emojis</h1>

<p style="font-size:48px"> 😀 😄 😍 💗 </p>

</body> </html>
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HTML Encoding (Character Sets) To display an HTML page correctly, a web browser must know which character set to use.

From ASCII to UTF-8 ASCII was the first character encoding standard. ASCII defined 128 different characters that could be used on the internet: numbers (0-9), English letters (A-Z), and some special characters like ! $ + - ( ) @ < > .

ISO-8859-1 was the default character set for HTML 4. This character set supported 256 different character codes. HTML 4 also supported UTF-8.

ANSI (Windows-1252) was the original Windows character set. ANSI is identical to ISO-8859-1, except that ANSI has 32 extra characters.

The default character set for HTML5 is UTF-8, which covers almost all of the characters and symbols in the world!

The HTML charset Attribute To display an HTML page correctly, a web browser must know the character set used in the page.

This is specified in the <meta> tag:

<meta charset="UTF-8">

Differences Between Character Sets The following table displays the differences between the character sets described above:

Numb ASCII ANSI 8859 UTF-8 Description 32 space 33 ! ! ! ! exclamation mark 34 " " " " quotation mark 35 # # # # number sign 36 $ $ $ $ dollar sign 37 % % % % percent sign 38 & & & & ampersand 39 ' ' ' ' apostrophe 40 ( ( ( ( left parenthesis 41 ) ) ) ) right parenthesis 42 * * * * asterisk 43 + + + + plus sign 44 , , , , comma 45 - - - - hyphen-minus 46 . . . . full stop 47 / / / / solidus 48 0 0 0 0 digit zero 49 1 1 1 1 digit one 50 2 2 2 2 digit two 51 3 3 3 3 digit three 52 4 4 4 4 digit four 53 5 5 5 5 digit five 54 6 6 6 6 digit six 55 7 7 7 7 digit seven 56 8 8 8 8 digit eight 57 9 9 9 9 digit nine 58 : : : : colon 59 ; ; ; ; semicolon 60 < < < < less-than sign 61 = = = = equals sign 62 > > > > greater-than sign 63 ? ? ? ? question mark 64 @ @ @ @ commercial at 65 A A A A Latin capital letter A 66 B B B B Latin capital letter B 67 C C C C Latin capital letter C 68 D D D D Latin capital letter D 69 E E E E Latin capital letter E 70 F F F F Latin capital letter F 71 G G G G Latin capital letter G 72 H H H H Latin capital letter H 73 I I I I Latin capital letter I 74 J J J J Latin capital letter J 75 K K K K Latin capital letter K 76 L L L L Latin capital letter L 77 M M M M Latin capital letter M 78 N N N N Latin capital letter N 79 O O O O Latin capital letter O 80 P P P P Latin capital letter P 81 Q Q Q Q Latin capital letter Q 82 R R R R Latin capital letter R 83 S S S S Latin capital letter S 84 T T T T Latin capital letter T 85 U U U U Latin capital letter U 86 V V V V Latin capital letter V 87 W W W W Latin capital letter W 88 X X X X Latin capital letter X 89 Y Y Y Y Latin capital letter Y 90 Z Z Z Z Latin capital letter Z 91 [ [ [ [ left square bracket 92 \ \ \ \ reverse solidus 93 ] ] ] ] right square bracket 94 ^ ^ ^ ^ circumflex accent 95 _ _ _ _ low line 96 grave accent 97 a a a a Latin small letter a 98 b b b b Latin small letter b 99 c c c c Latin small letter c 100 d d d d Latin small letter d 101 e e e e Latin small letter e 102 f f f f Latin small letter f 103 g g g g Latin small letter g 104 h h h h Latin small letter h 105 i i i i Latin small letter i 106 j j j j Latin small letter j 107 k k k k Latin small letter k 108 l l l l Latin small letter l 109 m m m m Latin small letter m 110 n n n n Latin small letter n 111 o o o o Latin small letter o 112 p p p p Latin small letter p 113 q q q q Latin small letter q 114 r r r r Latin small letter r 115 s s s s Latin small letter s 116 t t t t Latin small letter t 117 u u u u Latin small letter u 118 v v v v Latin small letter v 119 w w w w Latin small letter w 120 x x x x Latin small letter x 121 y y y y Latin small letter y 122 z z z z Latin small letter z 123 { { { { left curly bracket 124 | | | | vertical line 125 } } } } right curly bracket 126 ~ ~ ~ ~ tilde 127 DEL
128 € euro sign 129    NOT USED 130 ‚ single low-9 quotation mark 131 ƒ Latin small letter f with hook 132 „ double low-9 quotation mark 133 … horizontal ellipsis 134 † dagger 135 ‡ double dagger 136 ˆ modifier letter circumflex accent 137 ‰ per mille sign 138 Š Latin capital letter S with caron 139 ‹ single left-pointing angle quotation mark 140 Œ Latin capital ligature OE 141    NOT USED 142 Ž Latin capital letter Z with caron 143    NOT USED 144    NOT USED 145 ‘ left single quotation mark 146 ’ right single quotation mark 147 “ left double quotation mark 148 ” right double quotation mark 149 • bullet 150 – en dash 151 — em dash 152 ˜ small tilde 153 ™ trade mark sign 154 š Latin small letter s with caron 155 › single right-pointing angle quotation mark 156 œ Latin small ligature oe 157    NOT USED 158 ž Latin small letter z with caron 159 Ÿ Latin capital letter Y with diaeresis 160 no-break space 161 ¡ ¡ ¡ inverted exclamation mark 162 ¢ ¢ ¢ cent sign 163 £ £ £ pound sign 164 ¤ ¤ ¤ currency sign 165 ¥ ¥ ¥ yen sign 166 ¦ ¦ ¦ broken bar 167 § § § section sign 168 ¨ ¨ ¨ diaeresis 169 © © © copyright sign 170 ª ª ª feminine ordinal indicator 171 « « « left-pointing double angle quotation mark 172 ¬ ¬ ¬ not sign 173 ­ ­ ­ soft hyphen 174 ® ® ® registered sign 175 ¯ ¯ ¯ macron 176 ° ° ° degree sign 177 ± ± ± plus-minus sign 178 ² ² ² superscript two 179 ³ ³ ³ superscript three 180 ´ ´ ´ acute accent 181 µ µ µ micro sign 182 ¶ ¶ ¶ pilcrow sign 183 · · · middle dot 184 ¸ ¸ ¸ cedilla 185 ¹ ¹ ¹ superscript one 186 º º º masculine ordinal indicator 187 » » » right-pointing double angle quotation mark 188 ¼ ¼ ¼ vulgar fraction one quarter 189 ½ ½ ½ vulgar fraction one half 190 ¾ ¾ ¾ vulgar fraction three quarters 191 ¿ ¿ ¿ inverted question mark 192 À À À Latin capital letter A with grave 193 Á Á Á Latin capital letter A with acute 194 Â Â Â Latin capital letter A with circumflex 195 Ã Ã Ã Latin capital letter A with tilde 196 Ä Ä Ä Latin capital letter A with diaeresis 197 Å Å Å Latin capital letter A with ring above 198 Æ Æ Æ Latin capital letter AE 199 Ç Ç Ç Latin capital letter C with cedilla 200 È È È Latin capital letter E with grave 201 É É É Latin capital letter E with acute 202 Ê Ê Ê Latin capital letter E with circumflex 203 Ë Ë Ë Latin capital letter E with diaeresis 204 Ì Ì Ì Latin capital letter I with grave 205 Í Í Í Latin capital letter I with acute 206 Î Î Î Latin capital letter I with circumflex 207 Ï Ï Ï Latin capital letter I with diaeresis 208 Ð Ð Ð Latin capital letter Eth 209 Ñ Ñ Ñ Latin capital letter N with tilde 210 Ò Ò Ò Latin capital letter O with grave 211 Ó Ó Ó Latin capital letter O with acute 212 Ô Ô Ô Latin capital letter O with circumflex 213 Õ Õ Õ Latin capital letter O with tilde 214 Ö Ö Ö Latin capital letter O with diaeresis 215 × × × multiplication sign 216 Ø Ø Ø Latin capital letter O with stroke 217 Ù Ù Ù Latin capital letter U with grave 218 Ú Ú Ú Latin capital letter U with acute 219 Û Û Û Latin capital letter U with circumflex 220 Ü Ü Ü Latin capital letter U with diaeresis 221 Ý Ý Ý Latin capital letter Y with acute 222 Þ Þ Þ Latin capital letter Thorn 223 ß ß ß Latin small letter sharp s 224 à à à Latin small letter a with grave 225 á á á Latin small letter a with acute 226 â â â Latin small letter a with circumflex 227 ã ã ã Latin small letter a with tilde 228 ä ä ä Latin small letter a with diaeresis 229 å å å Latin small letter a with ring above 230 æ æ æ Latin small letter ae 231 ç ç ç Latin small letter c with cedilla 232 è è è Latin small letter e with grave 233 é é é Latin small letter e with acute 234 ê ê ê Latin small letter e with circumflex 235 ë ë ë Latin small letter e with diaeresis 236 ì ì ì Latin small letter i with grave 237 í í í Latin small letter i with acute 238 î î î Latin small letter i with circumflex 239 ï ï ï Latin small letter i with diaeresis 240 ð ð ð Latin small letter eth 241 ñ ñ ñ Latin small letter n with tilde 242 ò ò ò Latin small letter o with grave 243 ó ó ó Latin small letter o with acute 244 ô ô ô Latin small letter o with circumflex 245 õ õ õ Latin small letter o with tilde 246 ö ö ö Latin small letter o with diaeresis 247 ÷ ÷ ÷ division sign 248 ø ø ø Latin small letter o with stroke 249 ù ù ù Latin small letter u with grave 250 ú ú ú Latin small letter u with acute 251 û û û Latin small letter with circumflex 252 ü ü ü Latin small letter u with diaeresis 253 ý ý ý Latin small letter y with acute 254 þ þ þ Latin small letter thorn 255 ÿ ÿ ÿ Latin small letter y with diaeresis The ASCII Character Set ASCII uses the values from 0 to 31 (and 127) for control characters.

ASCII uses the values from 32 to 126 for letters, digits, and symbols.

ASCII does not use the values from 128 to 255.

The ANSI Character Set (Windows-1252) ANSI is identical to ASCII for the values from 0 to 127.

ANSI has a proprietary set of characters for the values from 128 to 159.

ANSI is identical to UTF-8 for the values from 160 to 255.

The ISO-8859-1 Character Set ISO-8859-1 is identical to ASCII for the values from 0 to 127.

ISO-8859-1 does not use the values from 128 to 159.

ISO-8859-1 is identical to UTF-8 for the values from 160 to 255.

The UTF-8 Character Set UTF-8 is identical to ASCII for the values from 0 to 127.

UTF-8 does not use the values from 128 to 159.

UTF-8 is identical to both ANSI and 8859-1 for the values from 160 to 255.

UTF-8 continues from the value 256 with more than 10 000 different characters.

For a closer look, study our Complete HTML Character Set Reference.
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HTML Uniform Resource Locators A URL is another word for a web address.

A URL can be composed of words (e.g. w3schools.com), or an Internet Protocol (IP) address (e.g. 192.68.20.50).

Most people enter the name when surfing, because names are easier to remember than numbers.

URL - Uniform Resource Locator Web browsers request pages from web servers by using a URL.

A Uniform Resource Locator (URL) is used to address a document (or other data) on the web.

A web address like https://www.w3schools.com/html/default.asp follows these syntax rules:

scheme://prefix.domain:port/path/filename Explanation:

scheme - defines the type of Internet service (most common is http or https) prefix - defines a domain prefix (default for http is www) domain - defines the Internet domain name (like w3schools.com) port - defines the port number at the host (default for http is 80) path - defines a path at the server (If omitted: the root directory of the site) filename - defines the name of a document or resource Common URL Schemes The table below lists some common schemes:

Scheme Short for Used for http HyperText Transfer Protocol Common web pages. Not encrypted https Secure HyperText Transfer Protocol Secure web pages. Encrypted ftp File Transfer Protocol Downloading or uploading files file A file on your computer

URL Encoding URLs can only be sent over the Internet using the ASCII character-set. If a URL contains characters outside the ASCII set, the URL has to be converted.

URL encoding converts non-ASCII characters into a format that can be transmitted over the Internet.

URL encoding replaces non-ASCII characters with a "%" followed by hexadecimal digits.

URLs cannot contain spaces. URL encoding normally replaces a space with a plus (+) sign, or %20.

Try It Yourself Hello Günter

If you click "Submit", the browser will URL encode the input before it is sent to the server.

A page at the server will display the received input.

Try some other input and click Submit again.

ASCII Encoding Examples Your browser will encode input, according to the character-set used in your page.

The default character-set in HTML5 is UTF-8.

Character From Windows-1252 From UTF-8 € %80 %E2%82%AC £ %A3 %C2%A3 © %A9 %C2%A9 ® %AE %C2%AE À %C0 %C3%80 Á %C1 %C3%81 Â %C2 %C3%82 Ã %C3 %C3%83 Ä %C4 %C3%84 Å %C5 %C3%85 For a complete reference of all URL encodings, visit our URL Encoding Reference.
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HTML Versus XHTML XHTML is a stricter, more XML-based version of HTML.

What is XHTML? XHTML stands for EXtensible HyperText Markup Language XHTML is a stricter, more XML-based version of HTML XHTML is HTML defined as an XML application XHTML is supported by all major browsers Why XHTML? XML is a markup language where all documents must be marked up correctly (be "well-formed").

XHTML was developed to make HTML more extensible and flexible to work with other data formats (such as XML). In addition, browsers ignore errors in HTML pages, and try to display the website even if it has some errors in the markup. So XHTML comes with a much stricter error handling.

If you want to study XML, please read our XML Tutorial.

The Most Important Differences from HTML <!DOCTYPE> is mandatory The xmlns attribute in <html> is mandatory <html>, <head>, <title>, and <body> are mandatory Elements must always be properly nested Elements must always be closed Elements must always be in lowercase Attribute names must always be in lowercase Attribute values must always be quoted Attribute minimization is forbidden

XHTML - <!DOCTYPE ….> Is Mandatory An XHTML document must have an XHTML <!DOCTYPE> declaration.

The <html>, <head>, <title>, and <body> elements must also be present, and the xmlns attribute in <html> must specify the xml namespace for the document.

Example Here is an XHTML document with a minimum of required tags:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Title of document</title> </head> <body>

some content here…

</body> </html> XHTML Elements Must be Properly Nested In XHTML, elements must always be properly nested within each other, like this:

Correct: <b><i>Some text</i></b> Wrong: <b><i>Some text</b></i> XHTML Elements Must Always be Closed In XHTML, elements must always be closed, like this:

Correct: <p>This is a paragraph</p> <p>This is another paragraph</p> Wrong: <p>This is a paragraph <p>This is another paragraph XHTML Empty Elements Must Always be Closed In XHTML, empty elements must always be closed, like this:

Correct: A break: <br /> A horizontal rule: <hr /> An image: <img src="happy.gif" alt="Happy face" /> Wrong: A break: <br> A horizontal rule: <hr> An image: <img src="happy.gif" alt="Happy face"> XHTML Elements Must be in Lowercase In XHTML, element names must always be in lowercase, like this:

Correct: <body> <p>This is a paragraph</p> </body> Wrong: <BODY> <P>This is a paragraph</P> </BODY> XHTML Attribute Names Must be in Lowercase In XHTML, attribute names must always be in lowercase, like this:

Correct: <a href="https://www.w3schools.com/html/">Visit our HTML tutorial</a> Wrong: <a HREF="https://www.w3schools.com/html/">Visit our HTML tutorial</a> XHTML Attribute Values Must be Quoted In XHTML, attribute values must always be quoted, like this:

Correct: <a href="https://www.w3schools.com/html/">Visit our HTML tutorial</a> Wrong: <a href=https://www.w3schools.com/html/>Visit our HTML tutorial</a> XHTML Attribute Minimization is Forbidden In XHTML, attribute minimization is forbidden:

Correct: <input type="checkbox" name="vehicle" value="car" checked="checked" /> <input type="text" name="lastname" disabled="disabled" /> Wrong: <input type="checkbox" name="vehicle" value="car" checked /> <input type="text" name="lastname" disabled /> Validate HTML With The W3C Validator Put your web address in the box below:

https://www.w3schools.com/html/html_validate.html
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HTML Forms An HTML form is used to collect user input. The user input is most often sent to a server for processing.

Example First name: John

Last name: Doe

The <form> Element The HTML <form> element is used to create an HTML form for user input:

<form> . form elements . </form> The <form> element is a container for different types of input elements, such as: text fields, checkboxes, radio buttons, submit buttons, etc.

All the different form elements are covered in this chapter: HTML Form Elements.

The <input> Element The HTML <input> element is the most used form element.

An <input> element can be displayed in many ways, depending on the type attribute.

Here are some examples:

Type Description <input type="text"> Displays a single-line text input field <input type="radio"> Displays a radio button (for selecting one of many choices) <input type="checkbox"> Displays a checkbox (for selecting zero or more of many choices) <input type="submit"> Displays a submit button (for submitting the form) <input type="button"> Displays a clickable button All the different input types are covered in this chapter: HTML Input Types.

Text Fields The <input type="text"> defines a single-line input field for text input.

Example A form with input fields for text:

<form> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname"><br> <label for="lname">Last name:</label><br> <input type="text" id="lname" name="lname"> </form> This is how the HTML code above will be displayed in a browser:

First name:

Last name: Note: The form itself is not visible. Also note that the default width of an input field is 20 characters.

The <label> Element Notice the use of the <label> element in the example above.

The <label> tag defines a label for many form elements.

The <label> element is useful for screen-reader users, because the screen-reader will read out loud the label when the user focus on the input element.

The <label> element also help users who have difficulty clicking on very small regions (such as radio buttons or checkboxes) - because when the user clicks the text within the <label> element, it toggles the radio button/checkbox.

The for attribute of the <label> tag should be equal to the id attribute of the <input> element to bind them together.

Radio Buttons The <input type="radio"> defines a radio button.

Radio buttons let a user select ONE of a limited number of choices.

Example A form with radio buttons:

<form> <input type="radio" id="male" name="gender" value="male"> <label for="male">Male</label><br> <input type="radio" id="female" name="gender" value="female"> <label for="female">Female</label><br> <input type="radio" id="other" name="gender" value="other"> <label for="other">Other</label> </form> This is how the HTML code above will be displayed in a browser:

Male Female Other Checkboxes The <input type="checkbox"> defines a checkbox.

Checkboxes let a user select ZERO or MORE options of a limited number of choices.

Example A form with checkboxes:

<form> <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike"> <label for="vehicle1"> I have a bike</label><br> <input type="checkbox" id="vehicle2" name="vehicle2" value="Car"> <label for="vehicle2"> I have a car</label><br> <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat"> <label for="vehicle3"> I have a boat</label> </form> This is how the HTML code above will be displayed in a browser:

I have a bike I have a car I have a boat The Submit Button The <input type="submit"> defines a button for submitting the form data to a form-handler.

The form-handler is typically a file on the server with a script for processing input data.

The form-handler is specified in the form's action attribute.

Example A form with a submit button:

<form action="/action_page.php"> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname" value="John"><br> <label for="lname">Last name:</label><br> <input type="text" id="lname" name="lname" value="Doe"><br><br> <input type="submit" value="Submit"> </form> This is how the HTML code above will be displayed in a browser:

First name: John

Last name: Doe

The Name Attribute for <input> Notice that each input field must have a name attribute to be submitted.

If the name attribute is omitted, the value of the input field will not be sent at all.

Example This example will not submit the value of the "First name" input field:

<form action="/action_page.php"> <label for="fname">First name:</label><br> <input type="text" id="fname" value="John"><br><br> <input type="submit" value="Submit"> </form> HTML Exercises Test Yourself With Exercises Exercise: In the form below, add an input field with the type "button" and the value "OK".

<form> < > </form>

Start the Exercise

COLOR PICKER colorpicker LIKE US

HOW TO Tabs Dropdowns Accordions Side Navigation Top Navigation Modal Boxes Progress Bars Parallax Login Form HTML Includes Google Maps Range Sliders Tooltips Slideshow Filter List Sort List Certificates

Top Tutorials HTML Tutorial CSS Tutorial JavaScript Tutorial How To Tutorial SQL Tutorial Python Tutorial W3.CSS Tutorial Bootstrap Tutorial PHP Tutorial Java Tutorial C++ Tutorial jQuery Tutorial Top References HTML Reference CSS Reference JavaScript Reference SQL Reference Python Reference W3.CSS Reference Bootstrap Reference PHP Reference HTML Colors Java Reference Angular Reference jQuery Reference Top Examples HTML Examples CSS Examples JavaScript Examples How To Examples SQL Examples Python Examples W3.CSS Examples Bootstrap Examples PHP Examples Java Examples XML Examples jQuery Examples Web Certificates HTML Certificate CSS Certificate JavaScript Certificate SQL Certificate Python Certificate PHP Certificate Bootstrap Certificate XML Certificate jQuery Certificate W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Copyright 1999-2020 by Refsnes Data. All Rights Reserved. W3Schools is Powered by W3.CSS.

W3Schools.com

aaaaaaaaaaaaa

<!DOCTYPE html> <html> <body>

<h2>HTML Forms</h2>

<form action="/action_page.php"> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname" value="John"><br> <label for="lname">Last name:</label><br> <input type="text" id="lname" name="lname" value="Doe"><br><br> <input type="submit" value="Submit"> </form>

<p>If you click the "Submit" button, the form-data will be sent to a page called "/action_page.php".</p>

</body> </html>
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<!DOCTYPE html> <html> <body>

<h2>Text input fields</h2>

<form> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname" value="John"><br> <label for="lname">Last name:</label><br> <input type="text" id="lname" name="lname" value="Doe"> </form>

<p>Note that the form itself is not visible.</p>

<p>Also note that the default width of text input fields is 20 characters.</p>

</body> </html>
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<!DOCTYPE html> <html> <body>

<h2>Radio Buttons</h2>

<form> <input type="radio" id="male" name="gender" value="male"> <label for="male">Male</label><br> <input type="radio" id="female" name="gender" value="female"> <label for="female">Female</label><br> <input type="radio" id="other" name="gender" value="other"> <label for="other">Other</label> </form>

</body> </html>
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<!DOCTYPE html> <html> <body>

<h2>Checkboxes</h2> <p>The <strong>input type="checkbox"</strong> defines a checkbox:</p>

<form action="/action_page.php"> <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike"> <label for="vehicle1"> I have a bike</label><br> <input type="checkbox" id="vehicle2" name="vehicle2" value="Car"> <label for="vehicle2"> I have a car</label><br> <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat"> <label for="vehicle3"> I have a boat</label><br><br> <input type="submit" value="Submit"> </form>

</body> </html>
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<!DOCTYPE html> <html> <body>

<h2>HTML Forms</h2>

<form action="/action_page.php"> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname" value="John"><br> <label for="lname">Last name:</label><br> <input type="text" id="lname" name="lname" value="Doe"><br><br> <input type="submit" value="Submit"> </form>

<p>If you click the "Submit" button, the form-data will be sent to a page called "/action_page.php".</p>

</body> </html>
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<!DOCTYPE html> <html> <body>

<h2>The name Attribute</h2>

<form action="/action_page.php"> <label for="fname">First name:</label><br> <input type="text" id="fname" value="John"><br><br> <input type="submit" value="Submit"> </form>

<p>If you click the "Submit" button, the form-data will be sent to a page called "/action_page.php".</p>

<p>Notice that the value of the "First name" field will not be submitted, because the input element does not have a name attribute.</p>

</body> </html>
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HTML Form Attributes This chapter describes the different attributes for the HTML <form> element.

The Action Attribute The action attribute defines the action to be performed when the form is submitted.

Usually, the form data is sent to a file on the server when the user clicks on the submit button.

In the example below, the form data is sent to a file called "action_page.php". This file contains a server-side script that handles the form data:

Example On submit, send form data to "action_page.php":

<form action="/action_page.php"> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname" value="John"><br> <label for="lname">Last name:</label><br> <input type="text" id="lname" name="lname" value="Doe"><br><br> <input type="submit" value="Submit"> </form> Tip: If the action attribute is omitted, the action is set to the current page.

The Target Attribute The target attribute specifies where to display the response that is received after submitting the form.

The target attribute can have one of the following values:

Value Description _blank The response is displayed in a new window or tab _self The response is displayed in the current window _parent The response is displayed in the parent frame _top The response is displayed in the full body of the window framename The response is displayed in a named iframe The default value is _self which means that the response will open in the current window.

Example Here, the submitted result will open in a new browser tab:

<form action="/actionpage.php" target="blank"> The Method Attribute The method attribute specifies the HTTP method to be used when submitting the form data.

The form-data can be sent as URL variables (with method="get") or as HTTP post transaction (with method="post").

The default HTTP method when submitting form data is GET.

Example This example uses the GET method when submitting the form data:

<form action="/action_page.php" method="get"> Example This example uses the POST method when submitting the form data:

<form action="/action_page.php" method="post"> Notes on GET:

Appends the form data to the URL, in name/value pairs NEVER use GET to send sensitive data! (the submitted form data is visible in the URL!) The length of a URL is limited (2048 characters) Useful for form submissions where a user wants to bookmark the result GET is good for non-secure data, like query strings in Google Notes on POST:

Appends the form data inside the body of the HTTP request (the submitted form data is not shown in the URL) POST has no size limitations, and can be used to send large amounts of data. Form submissions with POST cannot be bookmarked Tip: Always use POST if the form data contains sensitive or personal information!

The Autocomplete Attribute The autocomplete attribute specifies whether a form should have autocomplete on or off.

When autocomplete is on, the browser automatically complete values based on values that the user has entered before.

Example A form with autocomplete on:

<form action="/action_page.php" autocomplete="on"> The Novalidate Attribute The novalidate attribute is a boolean attribute.

When present, it specifies that the form-data (input) should not be validated when submitted.

Example A form with a novalidate attribute:

<form action="/actionpage.php" novalidate> HTML Exercises Test Yourself With Exercises Exercise: Add a submit button, and specify that the form should go to "/actionpage.php".

<form ="/action_page.php"> Name: <input type="text" name="name"> < > </form>

Start the Exercise

List of All <form> Attributes Attribute Description accept-charset Specifies the character encodings used for form submission action Specifies where to send the form-data when a form is submitted autocomplete Specifies whether a form should have autocomplete on or off enctype Specifies how the form-data should be encoded when submitting it to the server (only for method="post") method Specifies the HTTP method to use when sending form-data name Specifies the name of the form novalidate Specifies that the form should not be validated when submitted rel Specifies the relationship between a linked resource and the current document target Specifies where to display the response that is received after submitting the form
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<!DOCTYPE html> <html> <body>

<h2>HTML Forms</h2>

<form action="/action_page.php"> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname" value="John"><br> <label for="lname">Last name:</label><br> <input type="text" id="lname" name="lname" value="Doe"><br><br> <input type="submit" value="Submit"> </form>

<p>If you click the "Submit" button, the form-data will be sent to a page called "/action_page.php".</p>

</body> </html>

<!DOCTYPE html> <html> <body>

<h2>The form target attribute</h2>

<p>When submitting this form, the result will be opened in a new browser tab:</p>

<form action="/actionpage.php" target="blank"> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname" value="John"><br> <label for="lname">Last name:</label><br> <input type="text" id="lname" name="lname" value="Doe"><br><br> <input type="submit" value="Submit"> </form>

</body> </html>

<!DOCTYPE html> <html> <body>

<h2>The method Attribute</h2>

<p>This form will be submitted using the GET method:</p>

<form action="/actionpage.php" target="blank" method="get"> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname" value="John"><br> <label for="lname">Last name:</label><br> <input type="text" id="lname" name="lname" value="Doe"><br><br> <input type="submit" value="Submit"> </form>

<p>After you submit, notice that the form values is visible in the address bar of the new browser tab.</p>

</body> </html>

<!DOCTYPE html> <html> <body>

<h2>The method Attribute</h2>

<p>This form will be submitted using the POST method:</p>

<form action="/actionpage.php" target="blank" method="post"> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname" value="John"><br> <label for="lname">Last name:</label><br> <input type="text" id="lname" name="lname" value="Doe"><br><br> <input type="submit" value="Submit"> </form>

<p>After you submit, notice that, unlike the GET method, the form values is NOT visible in the address bar of the new browser tab.</p>

</body> </html>

<!DOCTYPE html> <html> <body>

<h1>The form autocomplete attribute</h1>

<p>Fill in and submit the form, then reload the page, start to fill in the form again - and see how autocomplete works.</p>

<p>Then, try to set autocomplete to "off".</p>

<form action="/action_page.php" autocomplete="on"> <label for="fname">First name:</label> <input type="text" id="fname" name="fname"><br><br> <label for="email">Email:</label> <input type="text" id="email" name="email"><br><br> <input type="submit"> </form>

</body> </html>

<!DOCTYPE html> <html> <body>

<h1>The form novalidate attribute</h1>

<p>The novalidate attribute indicates that the form input is not to be validated on submit:</p>

<form action="/action_page.php" novalidate> <label for="email">Enter your email:</label> <input type="email" id="email" name="email"><br><br> <input type="submit"> </form>

<p><strong>Note:</strong> The novalidate attribute of the form tag is not supported in Safari 10 (or earlier).</p>

</body> </html>
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HTML Form Elements This chapter describes all the different HTML form elements.

The HTML <form> Elements The HTML <form> element can contain one or more of the following form elements:

<input> <label> <select> <textarea> <button> <fieldset> <legend> <datalist> <output> <option> <optgroup> The <input> Element One of the most used form element is the <input> element.

The <input> element can be displayed in several ways, depending on the type attribute.

Example <label for="fname">First name:</label> <input type="text" id="fname" name="fname"> All the different values of the type attribute are covered in the next chapter: HTML Input Types.

The <label> Element The <label> element defines a label for several form elements.

The <label> element is useful for screen-reader users, because the screen-reader will read out loud the label when the user focus on the input element.

The <label> element also help users who have difficulty clicking on very small regions (such as radio buttons or checkboxes) - because when the user clicks the text within the <label> element, it toggles the radio button/checkbox.

The for attribute of the <label> tag should be equal to the id attribute of the <input> element to bind them together.

The <select> Element The <select> element defines a drop-down list:

Example <label for="cars">Choose a car:</label> <select id="cars" name="cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat">Fiat</option> <option value="audi">Audi</option> </select> The <option> elements defines an option that can be selected.

By default, the first item in the drop-down list is selected.

To define a pre-selected option, add the selected attribute to the option:

Example <option value="fiat" selected>Fiat</option> Visible Values: Use the size attribute to specify the number of visible values:

Example <label for="cars">Choose a car:</label> <select id="cars" name="cars" size="3"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat">Fiat</option> <option value="audi">Audi</option> </select> Allow Multiple Selections: Use the multiple attribute to allow the user to select more than one value:

Example <label for="cars">Choose a car:</label> <select id="cars" name="cars" size="4" multiple> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat">Fiat</option> <option value="audi">Audi</option> </select> The <textarea> Element The <textarea> element defines a multi-line input field (a text area):

Example <textarea name="message" rows="10" cols="30"> The cat was playing in the garden. </textarea> The rows attribute specifies the visible number of lines in a text area.

The cols attribute specifies the visible width of a text area.

This is how the HTML code above will be displayed in a browser:

The cat was playing in the garden.

You can also define the size of the text area by using CSS:

Example <textarea name="message" style="width:200px; height:600px;"> The cat was playing in the garden. </textarea> The <button> Element The <button> element defines a clickable button:

Example <button type="button" onclick="alert('Hello World!')">Click Me!</button> This is how the HTML code above will be displayed in a browser:

Click Me! Note: Always specify the type attribute for the button element. Different browsers may use different default types for the button element.

The <fieldset> and <legend> Elements The <fieldset> element is used to group related data in a form.

The <legend> element defines a caption for the <fieldset> element.

Example <form action="/action_page.php"> <fieldset> <legend>Personalia:</legend> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname" value="John"><br> <label for="lname">Last name:</label><br> <input type="text" id="lname" name="lname" value="Doe"><br><br> <input type="submit" value="Submit"> </fieldset> </form> This is how the HTML code above will be displayed in a browser:

Personalia: First name: John

Last name: Doe

The <datalist> Element The <datalist> element specifies a list of pre-defined options for an <input> element.

Users will see a drop-down list of the pre-defined options as they input data.

The list attribute of the <input> element, must refer to the id attribute of the <datalist> element.

Example <form action="/action_page.php"> <input list="browsers"> <datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist> </form> The <output> Element The <output> element represents the result of a calculation (like one performed by a script).

Example Perform a calculation and show the result in an <output> element:

<form action="/action_page.php" oninput="x.value=parseInt(a.value)+parseInt(b.value)"> 0 <input type="range" id="a" name="a" value="50"> 100 + <input type="number" id="b" name="b" value="50"> = <output name="x" for="a b"></output> <br><br> <input type="submit"> </form> HTML Exercises Test Yourself With Exercises Exercise: In the form below, add an empty drop down list with the name "cars".

<form action="/action_page.php"> < > </ > </form>

Start the Exercise

HTML Form Elements Tag Description <form> Defines an HTML form for user input <input> Defines an input control <textarea> Defines a multiline input control (text area) <label> Defines a label for an <input> element <fieldset> Groups related elements in a form <legend> Defines a caption for a <fieldset> element <select> Defines a drop-down list <optgroup> Defines a group of related options in a drop-down list <option> Defines an option in a drop-down list <button> Defines a clickable button <datalist> Specifies a list of pre-defined options for input controls <output> Defines the result of a calculation For a complete list of all available HTML tags, visit our HTML Tag Reference.
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<!DOCTYPE html> <html> <body>

<h2>Visible Option Values</h2>

<p>Use the size attribute to specify the number of visible values.</p>

<form action="/action_page.php"> <label for="cars">Choose a car:</label> <select id="cars" name="cars" size="3"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat">Fiat</option> <option value="audi">Audi</option> </select><br><br> <input type="submit"> </form>

</body> </html>

aaaaaaaa<!DOCTYPE html> <html> <body>

<h2>Visible Option Values</h2>

<p>Use the size attribute to specify the number of visible values.</p>

<form action="/action_page.php"> <label for="cars">Choose a car:</label> <select id="cars" name="cars" size="3"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat">Fiat</option> <option value="audi">Audi</option> </select><br><br> <input type="submit"> </form>

</body> </html>
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<!DOCTYPE html> <html> <body>

<h2>Allow Multiple Seletcions</h2>

<p>Use the multiple attribute to allow the user to select more than one value.</p>

<form action="/action_page.php"> <label for="cars">Choose a car:</label> <select id="cars" name="cars" size="4" multiple> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat">Fiat</option> <option value="audi">Audi</option> </select><br><br> <input type="submit"> </form>

<p>Hold down the Ctrl (windows) / Command (Mac) button to select multiple options.</p>

</body> </html>
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<!DOCTYPE html> <html> <body>

<h2>Textarea</h2> <p>The textarea element defines a multi-line input field.</p>

<form action="/action_page.php"> <textarea name="message" rows="10" cols="30">The cat was playing in the garden.</textarea> <br><br> <input type="submit"> </form>

</body> </html>
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<!DOCTYPE html> <html> <body>

<h2>Styling Textarea</h2>

<p>Use CSS to change the size of the textarea:</p>

<form action="/action_page.php"> <textarea name="message" style="width:200px; height:600px;">The cat was playing in the garden.</textarea> <br> <input type="submit"> </form>

</body> </html>
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<!DOCTYPE html> <html> <body>

<h2>The button Element</h2>

<button type="button" onclick="alert('Hello World!')">Click Me!</button>

</body> </html>

aaaaaa<!DOCTYPE html> <html> <body>

<h2>The input Element</h2>

<form action="/action_page.php"> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname"><br><br> <input type="submit" value="Submit"> </form>

</body> </html>
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<!DOCTYPE html> <html> <body>

<h2>The select Element</h2>

<p>The select element defines a drop-down list:</p>

<form action="/action_page.php"> <label for="cars">Choose a car:</label> <select id="cars" name="cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat">Fiat</option> <option value="audi">Audi</option> </select> <input type="submit"> </form>

</body> </html>

aaaaaaaa

<!DOCTYPE html> <html> <body>

<h2>Pre-selected Option</h2>

<p>You can preselect an option with the selected attribute:</p>

<form action="/action_page.php"> <label for="cars">Choose a car:</label> <select id="cars" name="cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat" selected>Fiat</option> <option value="audi">Audi</option> </select> <input type="submit"> </form>

</body> </html>
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<!DOCTYPE html> <html> <body>

<h2>The button Element</h2>

<button type="button" onclick="alert('Hello World!')">Click Me!</button>

</body> </html>
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<!DOCTYPE html> <html> <body>

<h2>Grouping Form Data with Fieldset</h2>

<p>The fieldset element is used to group related data in a form, and the legend element defines a caption for the fieldset element.</p>

<form action="/action_page.php"> <fieldset> <legend>Personalia:</legend> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname" value="John"><br> <label for="lname">Last name:</label><br> <input type="text" id="lname" name="lname" value="Doe"><br><br> <input type="submit" value="Submit"> </fieldset> </form>

</body> </html>
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<!DOCTYPE html> <html> <body>

<h2>The datalist Element</h2>

<p>The datalist element specifies a list of pre-defined options for an input element.</p>

<form action="/action_page.php"> <input list="browsers" name="browser"> <datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist> <input type="submit"> </form>

<p><b>Note:</b> The datalist tag is not supported in Safari prior version 12.1.</p>

</body> </html>
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<!DOCTYPE html> <html> <body>

<h2>The output Element</h2> <p>The output element represents the result of a calculation.</p>

<form action="/action_page.php" oninput="x.value=parseInt(a.value)+parseInt(b.value)"> 0 <input type="range" id="a" name="a" value="50"> 100 + <input type="number" id="b" name="b" value="50"> = <output name="x" for="a b"></output> <br><br> <input type="submit"> </form>

<p><strong>Note:</strong> The output element is not supported in Edge prior version 13.</p>

</body> </html>
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HTML Input Types This chapter describes the different types for the HTML <input> element.

HTML Input Types Here are the different input types you can use in HTML:

<input type="button"> <input type="checkbox"> <input type="color"> <input type="date"> <input type="datetime-local"> <input type="email"> <input type="file"> <input type="hidden"> <input type="image"> <input type="month"> <input type="number"> <input type="password"> <input type="radio"> <input type="range"> <input type="reset"> <input type="search"> <input type="submit"> <input type="tel"> <input type="text"> <input type="time"> <input type="url"> <input type="week"> Tip: The default value of the type attribute is "text".

Input Type Text <input type="text"> defines a single-line text input field:

Example <form> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname"><br> <label for="lname">Last name:</label><br> <input type="text" id="lname" name="lname"> </form> This is how the HTML code above will be displayed in a browser:

First name:

Last name:

Input Type Password <input type="password"> defines a password field:

Example <form> <label for="username">Username:</label><br> <input type="text" id="username" name="username"><br> <label for="pwd">Password:</label><br> <input type="password" id="pwd" name="pwd"> </form> This is how the HTML code above will be displayed in a browser:

Username:

Password: The characters in a password field are masked (shown as asterisks or circles).

Input Type Submit <input type="submit"> defines a button for submitting form data to a form-handler.

The form-handler is typically a server page with a script for processing input data.

The form-handler is specified in the form's action attribute:

Example <form action="/action_page.php"> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname" value="John"><br> <label for="lname">Last name:</label><br> <input type="text" id="lname" name="lname" value="Doe"><br><br> <input type="submit" value="Submit"> </form> This is how the HTML code above will be displayed in a browser:

First name: John

Last name: Doe

If you omit the submit button's value attribute, the button will get a default text:

Example <form action="/action_page.php"> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname" value="John"><br> <label for="lname">Last name:</label><br> <input type="text" id="lname" name="lname" value="Doe"><br><br> <input type="submit"> </form> Input Type Reset <input type="reset"> defines a reset button that will reset all form values to their default values:

Example <form action="/action_page.php"> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname" value="John"><br> <label for="lname">Last name:</label><br> <input type="text" id="lname" name="lname" value="Doe"><br><br> <input type="submit" value="Submit"> <input type="reset"> </form> This is how the HTML code above will be displayed in a browser:

First name: John

Last name: Doe

If you change the input values and then click the "Reset" button, the form-data will be reset to the default values.

Input Type Radio <input type="radio"> defines a radio button.

Radio buttons let a user select ONLY ONE of a limited number of choices:

Example <form> <input type="radio" id="male" name="gender" value="male"> <label for="male">Male</label><br> <input type="radio" id="female" name="gender" value="female"> <label for="female">Female</label><br> <input type="radio" id="other" name="gender" value="other"> <label for="other">Other</label> </form> This is how the HTML code above will be displayed in a browser:

Male Female Other Input Type Checkbox <input type="checkbox"> defines a checkbox.

Checkboxes let a user select ZERO or MORE options of a limited number of choices.

Example <form> <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike"> <label for="vehicle1"> I have a bike</label><br> <input type="checkbox" id="vehicle2" name="vehicle2" value="Car"> <label for="vehicle2"> I have a car</label><br> <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat"> <label for="vehicle3"> I have a boat</label> </form> This is how the HTML code above will be displayed in a browser:

I have a bike I have a car I have a boat Input Type Button <input type="button"> defines a button:

Example <input type="button" onclick="alert('Hello World!')" value="Click Me!"> This is how the HTML code above will be displayed in a browser:

Input Type Color The <input type="color"> is used for input fields that should contain a color.

Depending on browser support, a color picker can show up in the input field.

Example <form> <label for="favcolor">Select your favorite color:</label> <input type="color" id="favcolor" name="favcolor"> </form> Input Type Date The <input type="date"> is used for input fields that should contain a date.

Depending on browser support, a date picker can show up in the input field.

Example <form> <label for="birthday">Birthday:</label> <input type="date" id="birthday" name="birthday"> </form> You can also use the min and max attributes to add restrictions to dates:

Example <form> <label for="datemax">Enter a date before 1980-01-01:</label> <input type="date" id="datemax" name="datemax" max="1979-12-31"><br><br> <label for="datemin">Enter a date after 2000-01-01:</label> <input type="date" id="datemin" name="datemin" min="2000-01-02"> </form> Input Type Datetime-local The <input type="datetime-local"> specifies a date and time input field, with no time zone.

Depending on browser support, a date picker can show up in the input field.

Example <form> <label for="birthdaytime">Birthday (date and time):</label> <input type="datetime-local" id="birthdaytime" name="birthdaytime"> </form> Input Type Email The <input type="email"> is used for input fields that should contain an e-mail address.

Depending on browser support, the e-mail address can be automatically validated when submitted.

Some smartphones recognize the email type, and add ".com" to the keyboard to match email input.

Example <form> <label for="email">Enter your email:</label> <input type="email" id="email" name="email"> </form> Input Type File The <input type="file"> defines a file-select field and a "Browse" button for file uploads.

Example <form> <label for="myfile">Select a file:</label> <input type="file" id="myfile" name="myfile"> </form> Input Type Month The <input type="month"> allows the user to select a month and year.

Depending on browser support, a date picker can show up in the input field.

Example <form> <label for="bdaymonth">Birthday (month and year):</label> <input type="month" id="bdaymonth" name="bdaymonth"> </form> Input Type Number The <input type="number"> defines a numeric input field.

You can also set restrictions on what numbers are accepted.

The following example displays a numeric input field, where you can enter a value from 1 to 5:

Example <form> <label for="quantity">Quantity (between 1 and 5):</label> <input type="number" id="quantity" name="quantity" min="1" max="5"> </form> Input Restrictions Here is a list of some common input restrictions:

Attribute Description checked Specifies that an input field should be pre-selected when the page loads (for type="checkbox" or type="radio") disabled Specifies that an input field should be disabled max Specifies the maximum value for an input field maxlength Specifies the maximum number of character for an input field min Specifies the minimum value for an input field pattern Specifies a regular expression to check the input value against readonly Specifies that an input field is read only (cannot be changed) required Specifies that an input field is required (must be filled out) size Specifies the width (in characters) of an input field step Specifies the legal number intervals for an input field value Specifies the default value for an input field You will learn more about input restrictions in the next chapter.

The following example displays a numeric input field, where you can enter a value from 0 to 100, in steps of 10. The default value is 30:

Example <form> <label for="quantity">Quantity:</label> <input type="number" id="quantity" name="quantity" min="0" max="100" step="10" value="30"> </form> Input Type Range The <input type="range"> defines a control for entering a number whose exact value is not important (like a slider control). Default range is 0 to 100. However, you can set restrictions on what numbers are accepted with the min, max, and step attributes:

Example <form> <label for="vol">Volume (between 0 and 50):</label> <input type="range" id="vol" name="vol" min="0" max="50"> </form> Input Type Search The <input type="search"> is used for search fields (a search field behaves like a regular text field).

Example <form> <label for="gsearch">Search Google:</label> <input type="search" id="gsearch" name="gsearch"> </form> Input Type Tel The <input type="tel"> is used for input fields that should contain a telephone number.

Example <form> <label for="phone">Enter your phone number:</label> <input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}"> </form> Input Type Time The <input type="time"> allows the user to select a time (no time zone).

Depending on browser support, a time picker can show up in the input field.

Example <form> <label for="appt">Select a time:</label> <input type="time" id="appt" name="appt"> </form> Input Type Url The <input type="url"> is used for input fields that should contain a URL address.

Depending on browser support, the url field can be automatically validated when submitted.

Some smartphones recognize the url type, and adds ".com" to the keyboard to match url input.

Example <form> <label for="homepage">Add your homepage:</label> <input type="url" id="homepage" name="homepage"> </form> Input Type Week The <input type="week"> allows the user to select a week and year.

Depending on browser support, a date picker can show up in the input field.

Example <form> <label for="week">Select a week:</label> <input type="week" id="week" name="week"> </form> HTML Exercises Test Yourself With Exercises Exercise: In the form below, add an input field for text, with the name "username" .

<form action="/action_page.php"> < > </form>

Start the Exercise

HTML Input Type Attribute Tag Description <input type=""> Specifies the input type to display
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<!DOCTYPE html> <html> <body>

<h2>Text field</h2> <p>The <strong>input type="text"</strong> defines a one-line text input field:</p>

<form action="/action_page.php"> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname"><br> <label for="lname">Last name:</label><br> <input type="text" id="lname" name="lname"><br><br> <input type="submit" value="Submit"> </form>

<p>Note that the form itself is not visible.</p> <p>Also note that the default width of a text field is 20 characters.</p>

</body> </html>
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<!DOCTYPE html> <html> <body>

<h2>Password field</h2>

<p>The <strong>input type="password"</strong> defines a password field:</p>

<form action="/action_page.php"> <label for="username">Username:</label><br> <input type="text" id="username" name="username"><br> <label for="pwd">Password:</label><br> <input type="password" id="pwd" name="pwd"><br><br> <input type="submit" value="Submit"> </form>

<p>The characters in a password field are masked (shown as asterisks or circles).</p>

</body> </html>
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<!DOCTYPE html> <html> <body>

<h2>Submit Button</h2>

<p>The <strong>input type="submit"</strong> defines a button for submitting form data to a form-handler:</p>

<form action="/action_page.php"> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname" value="John"><br> <label for="lname">Last name:</label><br> <input type="text" id="lname" name="lname" value="Doe"><br><br> <input type="submit" value="Submit"> </form>

<p>If you click "Submit", the form-data will be sent to a page called "/action_page.php".</p>

</body> </html>
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<!DOCTYPE html> <html> <body>

<form action="/action_page.php"> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname" value="John"><br> <label for="lname">Last name:</label><br> <input type="text" id="lname" name="lname" value="Doe"><br><br> <input type="submit"> </form>

</body> </html>
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<!DOCTYPE html> <html> <body>

<h2>Reset Button</h2>

<p>The <strong>input type="reset"</strong> defines a reset button that resets all form values to their default values:</p>

<form action="/action_page.php"> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname" value="John"><br> <label for="lname">Last name:</label><br> <input type="text" id="lname" name="lname" value="Doe"><br><br> <input type="submit" value="Submit"> <input type="reset"> </form>

<p>If you change the input values and then click the "Reset" button, the form-data will be reset to the default values.</p>

</body> </html>
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<!DOCTYPE html> <html> <body>

<h2>Radio Buttons</h2>

<p>The <strong>input type="radio"</strong> defines a radio button:</p>

<form action="/action_page.php"> <input type="radio" id="male" name="gender" value="male"> <label for="male">Male</label><br> <input type="radio" id="female" name="gender" value="female"> <label for="female">Female</label><br> <input type="radio" id="other" name="gender" value="other"> <label for="other">Other</label><br><br> <input type="submit" value="Submit"> </form>

</body> </html>
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<!DOCTYPE html> <html> <body>

<h2>Checkboxes</h2> <p>The <strong>input type="checkbox"</strong> defines a checkbox:</p>

<form action="/action_page.php"> <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike"> <label for="vehicle1"> I have a bike</label><br> <input type="checkbox" id="vehicle2" name="vehicle2" value="Car"> <label for="vehicle2"> I have a car</label><br> <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat"> <label for="vehicle3"> I have a boat</label><br><br> <input type="submit" value="Submit"> </form>

</body> </html>
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<!DOCTYPE html> <html> <body>

<h2>Input Button</h2>

<input type="button" onclick="alert('Hello World!')" value="Click Me!">

</body> </html>
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<!DOCTYPE html> <html> <body>

<h2>Show a Color Picker</h2>

<p>The <strong>input type="color"</strong> is used for input fields that should contain a color.</p>

<form action="/action_page.php"> <label for="favcolor">Select your favorite color:</label> <input type="color" id="favcolor" name="favcolor" value="#ff0000"> <input type="submit" value="Submit"> </form>

<p><b>Note:</b> type="color" is not supported in Internet Explorer 11 or Safari 9.1 (or earlier).</p>

</body> </html>
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<!DOCTYPE html> <html> <body>

<h2>Date Field</h2>

<p>The <strong>input type="date"</strong> is used for input fields that should contain a date.</p>

<form action="/action_page.php"> <label for="birthday">Birthday:</label> <input type="date" id="birthday" name="birthday"> <input type="submit" value="Submit"> </form>

<p><strong>Note:</strong> type="date" is not supported in Safari or Internet Explorer 11 (or earlier).</p>

</body> </html>
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<!DOCTYPE html> <html> <body>

<h2>Date Field Restrictions</h2>

<p>Use the min and max attributes to add restrictions to dates:</p>

<form action="/action_page.php"> <label for="datemax">Enter a date before 1980-01-01:</label> <input type="date" id="datemax" name="datemax" max="1979-12-31"><br><br>

<label for="datemin">Enter a date after 2000-01-01:</label> <input type="date" id="datemin" name="datemin" min="2000-01-02"><br><br>

<input type="submit" value="Submit"> </form>

<p><strong>Note:</strong> type="date" is not supported in Safari or Internet Explorer 11 (or earlier).</p>

</body> </html>
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<!DOCTYPE html> <html> <body>

<h2>Local Date Field</h2>

<p>The <strong>input type="datetime-local"</strong> specifies a date and time input field, with no time zone.</p>

<form action="/action_page.php"> <label for="birthdaytime">Birthday (date and time):</label> <input type="datetime-local" id="birthdaytime" name="birthdaytime"> <input type="submit" value="Submit"> </form>

<p><strong>Note:</strong> type="datetime-local" is not supported in Firefox, Safari or Internet Explorer 12 (or earlier).</p>

</body> </html>
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<!DOCTYPE html> <html> <body>

<h2>Local Date Field</h2>

<p>The <strong>input type="datetime-local"</strong> specifies a date and time input field, with no time zone.</p>

<form action="/action_page.php"> <label for="birthdaytime">Birthday (date and time):</label> <input type="datetime-local" id="birthdaytime" name="birthdaytime"> <input type="submit" value="Submit"> </form>

<p><strong>Note:</strong> type="datetime-local" is not supported in Firefox, Safari or Internet Explorer 12 (or earlier).</p>

</body> </html>
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<!DOCTYPE html> <html> <body>

<h2>Email Field</h2>

<p>The <strong>input type="email"</strong> is used for input fields that should contain an e-mail address:</p>

<form action="/action_page.php"> <label for="email">Enter your email:</label> <input type="email" id="email" name="email"> <input type="submit" value="Submit"> </form>

</body> </html>
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<!DOCTYPE html> <html> <body>

<h1>File upload</h1>

<p>Show a file-select field which allows a file to be chosen for upload:</p> <form action="/action_page.php"> <label for="myfile">Select a file:</label> <input type="file" id="myfile" name="myfile"><br><br> <input type="submit" value="Submit"> </form>

</body> </html>
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<!DOCTYPE html> <html> <body>

<h2>Month Field</h2>

<p>The <strong>input type="month"</strong> allows the user to select a month and year.</p>

<form action="/action_page.php"> <label for="bdaymonth">Birthday (month and year):</label> <input type="month" id="bdaymonth" name="bdaymonth"> <input type="submit" value="Submit"> </form>

<p><strong>Note:</strong> type="month" is not supported in Firefox, Safari, or Internet Explorer 11 (or earlier).</p>

</body> </html>

aaaaaaaaaaaaaa

<!DOCTYPE html> <html> <body>

<h2>Number Field</h2>

<p>The <strong>input type="number"</strong> defines a numeric input field.</p>

<p>You can use the min and max attributes to add numeric restrictions in the input field:</p>

<form action="/action_page.php"> <label for="quantity">Quantity (between 1 and 5):</label> <input type="number" id="quantity" name="quantity" min="1" max="5"> <input type="submit" value="Submit"> </form>

</body> </html>
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<!DOCTYPE html> <html> <body>

<h2>Numeric Steps</h2>

<p>Depending on browser support: Fixed steps will apply in the input field.</p>

<form action="/action_page.php"> <label for="quantity">Quantity:</label> <input type="number" id="quantity" name="quantity" min="0" max="100" step="10" value="30"> <input type="submit" value="Submit"> </form>

</body> </html>
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<!DOCTYPE html> <html> <body>

<h2>Range Field</h2>

<p>Depending on browser support: The input type "range" can be displayed as a slider control.<p>

<form action="/action_page.php" method="get"> <label for="vol">Volume (between 0 and 50):</label> <input type="range" id="vol" name="vol" min="0" max="50"> <input type="submit" value="Submit"> </form>

</body> </html>
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<!DOCTYPE html> <html> <body>

<h2>Search Field</h2> <p>The <strong>input type="search"</strong> is used for search fields (behaves like a regular text field):</p>

<form action="/action_page.php"> <label for="gsearch">Search Google:</label> <input type="search" id="gsearch" name="gsearch"> <input type="submit" value="Submit"> </form>

</body> </html>
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<!DOCTYPE html> <html> <body>

<h2>Telephone Field</h2>

<p>The <strong>input type="tel"</strong> is used for input fields that should contain a telephone number:</p>

<form action="/action_page.php"> <label for="phone">Enter a phone number:</label><br><br> <input type="tel" id="phone" name="phone" placeholder="123-45-678" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}" required><br><br> <small>Format: 123-45-678</small><br><br> <input type="submit" value="Submit"> </form>

</body> </html>
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<!DOCTYPE html> <html> <body>

<h1>Show a Time Input Control</h1>

<p>The <strong>input type="time"</strong> allows the user to select a time (no time zone):</p>

<p>If the browser supports it, a time picker pops up when entering the input field.</p>

<form action="/action_page.php"> <label for="appt">Select a time:</label> <input type="time" id="appt" name="appt"> <input type="submit" value="Submit"> </form>

<p><strong>Note:</strong> type="time" is not supported in Safari or Internet Explorer 12 (or earlier).</p>

</body> </html>
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<!DOCTYPE html> <html> <body>

<h1>Display a URL Input Field</h1>

<p>The <strong>input type="url"</strong> is used for input fields that should contain a URL address:</p>

<form action="/action_page.php"> <label for="homepage">Add your homepage:</label> <input type="url" id="homepage" name="homepage"> <input type="submit" value="Submit"> </form>

</body> </html>
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<!DOCTYPE html> <html> <body>

<h1>Display a Week Input Control</h1>

<p>The <strong>input type="week"</strong> allows the user to select a week and year.</p>

<p>If the browser supports it, a date picker pops up when entering the input field.</p>

<form action="/action_page.php"> <label for="week">Select a week:</label> <input type="week" id="week" name="week"> <input type="submit" value="Submit"> </form>

<p><strong>Note:</strong> type="week" is not supported in Firefox, Safari or Internet Explorer 11 (or earlier).</p>

</body> </html>
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HTML Input Attributes This chapter describes the different attributes for the HTML <input> element.

The value Attribute The input value attribute specifies an initial value for an input field:

Example Input fields with initial (default) values:

<form> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname" value="John"><br> <label for="lname">Last name:</label><br> <input type="text" id="lname" name="lname" value="Doe"> </form> The readonly Attribute The input readonly attribute specifies that an input field is read-only.

A read-only input field cannot be modified (however, a user can tab to it, highlight it, and copy the text from it).

The value of a read-only input field will be sent when submitting the form!

Example A read-only input field:

<form> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname" value="John" readonly><br> <label for="lname">Last name:</label><br> <input type="text" id="lname" name="lname" value="Doe"> </form> The disabled Attribute The input disabled attribute specifies that an input field should be disabled.

A disabled input field is unusable and un-clickable.

The value of a disabled input field will not be sent when submitting the form!

Example A disabled input field:

<form> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname" value="John" disabled><br> <label for="lname">Last name:</label><br> <input type="text" id="lname" name="lname" value="Doe"> </form> The size Attribute The input size attribute specifies the visible width, in characters, of an input field.

The default value for size is 20.

Note: The size attribute works with the following input types: text, search, tel, url, email, and password.

Example Set a width for an input field:

<form> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname" size="50"><br> <label for="pin">PIN:</label><br> <input type="text" id="pin" name="pin" size="4"> </form> The maxlength Attribute The input maxlength attribute specifies the maximum number of characters allowed in an input field.

Note: When a maxlength is set, the input field will not accept more than the specified number of characters. However, this attribute does not provide any feedback. So, if you want to alert the user, you must write JavaScript code.

Example Set a maximum length for an input field:

<form> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname" size="50"><br> <label for="pin">PIN:</label><br> <input type="text" id="pin" name="pin" maxlength="4" size="4"> </form> The min and max Attributes The input min and max attributes specify the minimum and maximum values for an input field.

The min and max attributes work with the following input types: number, range, date, datetime-local, month, time and week.

Tip: Use the max and min attributes together to create a range of legal values.

Example Set a max date, a min date, and a range of legal values:

<form> <label for="datemax">Enter a date before 1980-01-01:</label> <input type="date" id="datemax" name="datemax" max="1979-12-31"><br><br>

<label for="datemin">Enter a date after 2000-01-01:</label> <input type="date" id="datemin" name="datemin" min="2000-01-02"><br><br>

<label for="quantity">Quantity (between 1 and 5):</label> <input type="number" id="quantity" name="quantity" min="1" max="5"> </form> The multiple Attribute The input multiple attribute specifies that the user is allowed to enter more than one value in an input field.

The multiple attribute works with the following input types: email, and file.

Example A file upload field that accepts multiple values:

<form> <label for="files">Select files:</label> <input type="file" id="files" name="files" multiple> </form> The pattern Attribute The input pattern attribute specifies a regular expression that the input field's value is checked against, when the form is submitted.

The pattern attribute works with the following input types: text, date, search, url, tel, email, and password.

Tip: Use the global title attribute to describe the pattern to help the user.

Tip: Learn more about regular expressions in our JavaScript tutorial.

Example An input field that can contain only three letters (no numbers or special characters):

<form> <label for="countrycode">Country code:</label> <input type="text" id="countrycode" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code"> </form> The placeholder Attribute The input placeholder attribute specifies short a hint that describes the expected value of an input field (a sample value or a short description of the expected format).

The short hint is displayed in the input field before the user enters a value.

The placeholder attribute works with the following input types: text, search, url, tel, email, and password.

Example An input field with a placeholder text:

<form> <label for="phone">Enter a phone number:</label> <input type="tel" id="phone" name="phone" placeholder="123-45-678" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}"> </form> The required Attribute The input required attribute specifies that an input field must be filled out before submitting the form.

The required attribute works with the following input types: text, search, url, tel, email, password, date pickers, number, checkbox, radio, and file.

Example A required input field:

<form> <label for="username">Username:</label> <input type="text" id="username" name="username" required> </form> The step Attribute The input step attribute specifies the legal number intervals for an input field.

Example: if step="3", legal numbers could be -3, 0, 3, 6, etc.

Tip: This attribute can be used together with the max and min attributes to create a range of legal values.

The step attribute works with the following input types: number, range, date, datetime-local, month, time and week.

Example An input field with a specified legal number intervals:

<form> <label for="points">Points:</label> <input type="number" id="points" name="points" step="3"> </form> Note: Input restrictions are not foolproof, and JavaScript provides many ways to add illegal input. To safely restrict input, it must also be checked by the receiver (the server)!

The autofocus Attribute The input autofocus attribute specifies that an input field should automatically get focus when the page loads.

Example Let the "First name" input field automatically get focus when the page loads:

<form> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname" autofocus><br> <label for="lname">Last name:</label><br> <input type="text" id="lname" name="lname"> </form> The height and width Attributes The input height and width attributes specify the height and width of an <input type="image"> element.

Tip: Always specify both the height and width attributes for images. If height and width are set, the space required for the image is reserved when the page is loaded. Without these attributes, the browser does not know the size of the image, and cannot reserve the appropriate space to it. The effect will be that the page layout will change during loading (while the images load).

Example Define an image as the submit button, with height and width attributes:

<form> <label for="fname">First name:</label> <input type="text" id="fname" name="fname"><br><br> <label for="lname">Last name:</label> <input type="text" id="lname" name="lname"><br><br> <input type="image" src="img_submit.gif" alt="Submit" width="48" height="48"> </form> The list Attribute The input list attribute refers to a <datalist> element that contains pre-defined options for an <input> element.

Example An <input> element with pre-defined values in a <datalist>:

<form> <input list="browsers"> <datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist> </form> The autocomplete Attribute The input autocomplete attribute specifies whether a form or an input field should have autocomplete on or off.

Autocomplete allows the browser to predict the value. When a user starts to type in a field, the browser should display options to fill in the field, based on earlier typed values.

The autocomplete attribute works with <form> and the following <input> types: text, search, url, tel, email, password, datepickers, range, and color.

Example An HTML form with autocomplete on, and off for one input field:

<form action="/action_page.php" autocomplete="on"> <label for="fname">First name:</label> <input type="text" id="fname" name="fname"><br><br> <label for="lname">Last name:</label> <input type="text" id="lname" name="lname"><br><br> <label for="email">Email:</label> <input type="email" id="email" name="email" autocomplete="off"><br><br> <input type="submit" value="Submit"> </form> Tip: In some browsers you may need to activate an autocomplete function for this to work (Look under "Preferences" in the browser's menu).

HTML Exercises Test Yourself With Exercises Exercise: In the input field below, add placeholder that says "Your name here".

<form action="/action_page.php"> <input type="text" > </form>

Start the Exercise

HTML Form and Input Elements Tag Description <form> Defines an HTML form for user input <input> Defines an input control For a complete list of all available HTML tags, visit our HTML Tag Reference.
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<!DOCTYPE html> <html> <body>

<h1>The input value attribute</h1>

<p>The value attribute specifies an initial value for an input field:</p>

<form action="/action_page.php"> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname" value="John"><br> <label for="lname">Last name:</label><br> <input type="text" id="lname" name="lname" value="Doe"><br><br> <input type="submit" value="Submit"> </form>

</body> </html>

aaa

<!DOCTYPE html> <html> <body>

<h1>The input readonly attribute</h1>

<p>The readonly attribute specifies that an input field should be read-only (cannot be changed):</p>

<form action="/action_page.php"> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname" value="John" readonly><br> <label for="lname">Last name:</label><br> <input type="text" id="lname" name="lname" value="Doe"><br><br> <input type="submit" value="Submit"> </form>

</body> </html>
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<!DOCTYPE html> <html> <body>

<h1>The input disabled attribute</h1>

<p>The disabled attribute specifies that an input field should be disabled (unusable and un-clickable):</p>

<form action="/action_page.php"> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname" value="John" disabled><br> <label for="lname">Last name:</label><br> <input type="text" id="lname" name="lname" value="Doe"><br><br> <input type="submit" value="Submit"> </form>

</body> </html>
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<!DOCTYPE html> <html> <body>

<h1>The input size attribute</h1>

<p>The size attribute specifies the width (in characters) of an input field:</p>

<form action="/action_page.php"> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname" size="50"><br> <label for="pin">PIN:</label><br> <input type="text" id="pin" name="pin" size="4"><br><br> <input type="submit" value="Submit"> </form>

</body> </html>

aaaaaaa

<!DOCTYPE html> <html> <body>

<h1>The input maxlength attribute</h1>

<p>The maxlength attribute specifies the maximum number of characters allowed in an input field:</p>

<form action="/action_page.php"> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname" size="50"><br> <label for="pin">PIN:</label><br> <input type="text" id="pin" name="pin" maxlength="4" size="4"><br><br> <input type="submit" value="Submit"> </form>

</body> </html>
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<!DOCTYPE html> <html> <body>

<h1>The input min and max attributes</h1>

<p>The min and max attributes specify the minimum and maximum values for an input element.</p>

<form action="/action_page.php"> <label for="datemax">Enter a date before 1980-01-01:</label> <input type="date" id="datemax" name="datemax" max="1979-12-31"><br><br>

<label for="datemin">Enter a date after 2000-01-01:</label> <input type="date" id="datemin" name="datemin" min="2000-01-02"><br><br>

<label for="quantity">Quantity (between 1 and 5):</label> <input type="number" id="quantity" name="quantity" min="1" max="5"><br><br>

<input type="submit" value="Submit"> </form>

</body> </html>
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<!DOCTYPE html> <html> <body>

<h1>The input multiple attributes</h1>

<p>The multiple attribute specifies that the user is allowed to enter more than one value in an input field.</p>

<form action="/action_page.php"> <label for="files">Select files:</label> <input type="file" id="files" name="files" multiple><br><br> <input type="submit" value="Submit"> </form>

<p>To select multiple files, hold down the CTRL or SHIFT key while selecting.</p>

</body> </html>
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<!DOCTYPE html> <html> <body>

<h1>The input pattern attribute</h1>

<p>The pattern attribute specifies a regular expression that the input element's value is checked against.</p>

<form action="/actionpage.php"> <label for="countrycode">Country code:</label> <input type="text" id="countrycode" name="countrycode" pattern="[A-Za-z]{3}" title="Three letter country code"><br><br> <input type="submit" value="Submit"> </form>

<p><strong>Note:</strong> The pattern attribute of the input tag is not supported in Safari 10 (or earlier).</p>

</body> </html>
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<!DOCTYPE html> <html> <body>

<h1>The input placeholder attribute</h1>

<p>The placeholder attribute specifies a short hint that describes the expected value of an input field.</p>

<form action="/action_page.php"> <label for="phone">Enter a phone number:</label> <input type="tel" id="phone" name="phone" placeholder="123-45-678" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}"><br><br> <input type="submit" value="Submit"> </form>

</body> </html>
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<!DOCTYPE html> <html> <body>

<h1>The input required attribute</h1>

<p>The required attribute specifies that an input field must be filled out before submitting the form.</p>

<form action="/action_page.php"> <label for="username">Username:</label> <input type="text" id="username" name="username" required> <input type="submit" value="Submit"> </form>

<p><strong>Note:</strong> The required attribute of the input tag is not supported in Safari prior version 10.1.</p>

</body> </html>
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<!DOCTYPE html> <html> <body>

<h1>The input step attribute</h1>

<p>The step attribute specifies the legal number intervals for an input element.</p>

<form action="/action_page.php"> <label for="points">Points:</label> <input type="number" id="points" name="points" step="3"> <input type="submit" value="Submit"> </form>

</body> </html>
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<!DOCTYPE html> <html> <body>

<h1>The input autofocus attribute</h1>

<p>The autofocus attribute specifies that the input field should automatically get focus when the page loads.</p>

<form action="/action_page.php"> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname" autofocus><br> <label for="lname">Last name:</label><br> <input type="text" id="lname" name="lname"><br><br> <input type="submit" value="Submit"> </form>

</body> </html>
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<!DOCTYPE html> <html> <body>

<h1>The input list attribute</h1>

<p>The list attribute refers to a datalist element that contains pre-defined options for an input element.</p>

<form action="/action_page.php"> <input list="browsers" name="browser"> <datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist> <input type="submit" value="Submit"> </form>

<p><b>Note:</b> The datalist tag is not supported in Safari 12.0 (or earlier).</p>

</body> </html>
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<!DOCTYPE html> <html> <body>

<h1>The input list attribute</h1>

<p>The list attribute refers to a datalist element that contains pre-defined options for an input element.</p>

<form action="/action_page.php"> <input list="browsers" name="browser"> <datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist> <input type="submit" value="Submit"> </form>

<p><b>Note:</b> The datalist tag is not supported in Safari 12.0 (or earlier).</p>

</body> </html>
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<!DOCTYPE html> <html> <body>

<h1>The autocomplete attribute</h1>

<p>The autocomplete attribute specifies whether or not an input field should have autocomplete enabled.</p>

<p>Fill in and submit the form, then reload the page to see how autocomplete works.</p>

<p>Notice that autocomplete is "on" for the form, but "off" for the e-mail field!</p>

<form action="/action_page.php" autocomplete="on"> <label for="fname">First name:</label> <input type="text" id="fname" name="fname"><br><br> <label for="lname">Last name:</label> <input type="text" id="lname" name="lname"><br><br> <label for="email">Email:</label> <input type="email" id="email" name="email" autocomplete="off"><br><br> <input type="submit" value="Submit"> </form>

</body> </html>
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HTML Input form* Attributes This chapter describes the different form* attributes for the HTML <input> element.

The form Attribute The input form attribute specifies the form the <input> element belongs to.

The value of this attribute must be equal to the id attribute of the <form> element it belongs to.

Example An input field located outside of the HTML form (but still a part of the form):

<form action="/action_page.php" id="form1"> <label for="fname">First name:</label> <input type="text" id="fname" name="fname"><br><br> <input type="submit" value="Submit"> </form>

<label for="lname">Last name:</label> <input type="text" id="lname" name="lname" form="form1"> The formaction Attribute The input formaction attribute specifies the URL of the file that will process the input when the form is submitted.

Note: This attribute overrides the action attribute of the <form> element.

The formaction attribute works with the following input types: submit and image.

Example An HTML form with two submit buttons, with different actions:

<form action="/actionpage.php"> <label for="fname">First name:</label> <input type="text" id="fname" name="fname"><br><br> <label for="lname">Last name:</label> <input type="text" id="lname" name="lname"><br><br> <input type="submit" value="Submit"> <input type="submit" formaction="/actionpage2.php" value="Submit as Admin"> </form> The formenctype Attribute The input formenctype attribute specifies how the form-data should be encoded when submitted (only for forms with method="post").

Note: This attribute overrides the enctype attribute of the <form> element.

The formenctype attribute works with the following input types: submit and image.

Example A form with two submit buttons. The first sends the form-data with default encoding, the second sends the form-data encoded as "multipart/form-data":

<form action="/actionpagebinary.asp" method="post"> <label for="fname">First name:</label> <input type="text" id="fname" name="fname"><br><br> <input type="submit" value="Submit"> <input type="submit" formenctype="multipart/form-data" value="Submit as Multipart/form-data"> </form> The formmethod Attribute The input formmethod attribute defines the HTTP method for sending form-data to the action URL.

Note: This attribute overrides the method attribute of the <form> element.

The formmethod attribute works with the following input types: submit and image.

The form-data can be sent as URL variables (method="get") or as an HTTP post transaction (method="post").

Notes on the "get" method:

This method appends the form-data to the URL in name/value pairs This method is useful for form submissions where a user want to bookmark the result There is a limit to how much data you can place in a URL (varies between browsers), therefore, you cannot be sure that all of the form-data will be correctly transferred Never use the "get" method to pass sensitive information! (password or other sensitive information will be visible in the browser's address bar) Notes on the "post" method:

This method sends the form-data as an HTTP post transaction Form submissions with the "post" method cannot be bookmarked The "post" method is more robust and secure than "get", and "post" does not have size limitations Example A form with two submit buttons. The first sends the form-data with method="get". The second sends the form-data with method="post":

<form action="/action_page.php" method="get"> <label for="fname">First name:</label> <input type="text" id="fname" name="fname"><br><br> <label for="lname">Last name:</label> <input type="text" id="lname" name="lname"><br><br> <input type="submit" value="Submit using GET"> <input type="submit" formmethod="post" value="Submit using POST"> </form> The formtarget Attribute The input formtarget attribute specifies a name or a keyword that indicates where to display the response that is received after submitting the form.

Note: This attribute overrides the target attribute of the <form> element.

The formtarget attribute works with the following input types: submit and image.

Example A form with two submit buttons, with different target windows:

<form action="/actionpage.php"> <label for="fname">First name:</label> <input type="text" id="fname" name="fname"><br><br> <label for="lname">Last name:</label> <input type="text" id="lname" name="lname"><br><br> <input type="submit" value="Submit"> <input type="submit" formtarget="blank" value="Submit to a new window/tab"> </form> The formnovalidate Attribute The input formnovalidate attribute specifies that an <input> element should not be validated when submitted.

Note: This attribute overrides the novalidate attribute of the <form> element.

The formnovalidate attribute works with the following input types: submit.

Example A form with two submit buttons (with and without validation):

<form action="/action_page.php"> <label for="email">Enter your email:</label> <input type="email" id="email" name="email"><br><br> <input type="submit" value="Submit"> <input type="submit" formnovalidate="formnovalidate" value="Submit without validation"> </form> The novalidate Attribute The novalidate attribute is a <form> attribute.

When present, novalidate specifies that all of the form-data should not be validated when submitted.

Example Specify that no form-data should be validated on submit:

<form action="/action_page.php" novalidate> <label for="email">Enter your email:</label> <input type="email" id="email" name="email"><br><br> <input type="submit" value="Submit"> </form> HTML Form and Input Elements Tag Description <form> Defines an HTML form for user input <input> Defines an input control For a complete list of all available HTML tags, visit our HTML Tag Reference.
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<!DOCTYPE html> <html> <body>

<h1>The input form attribute</h1>

<p>The form attribute specifies the form an input element belongs to.</p>

<form action="/action_page.php" id="form1"> <label for="fname">First name:</label> <input type="text" id="fname" name="fname"><br><br> <input type="submit" value="Submit"> </form>

<p>The "Last name" field below is outside the form element, but still part of the form.</p>

<label for="lname">Last name:</label> <input type="text" id="lname" name="lname" form="form1">

</body> </html>
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<!DOCTYPE html> <html> <body>

<h1>The input formaction attribute</h1>

<p>The formaction attribute specifies the URL of a file that will process the input when the form is submitted.</p>

<form action="/actionpage.php"> <label for="fname">First name:</label> <input type="text" id="fname" name="fname"><br><br> <label for="lname">Last name:</label> <input type="text" id="lname" name="lname"><br><br> <input type="submit" value="Submit"> <input type="submit" formaction="/actionpage2.php" value="Submit as Admin"> </form>

</body> </html>
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<!DOCTYPE html> <html> <body>

<h1>The input formenctype attribute</h1>

<p>The formenctype attribute specifies how the form data should be encoded when submitted.</p>

<form action="/actionpagebinary.asp" method="post"> <label for="fname">First name:</label> <input type="text" id="fname" name="fname"><br><br> <input type="submit" value="Submit"> <input type="submit" formenctype="multipart/form-data" value="Submit as Multipart/form-data"> </form>

</body> </html>
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<!DOCTYPE html> <html> <body>

<h1>The input formmethod Attribute</h1>

<p>The formmethod attribute defines the HTTP method for sending form-data to the action URL.</p>

<form action="/actionpage.php" method="get" target="blank"> <label for="fname">First name:</label> <input type="text" id="fname" name="fname"><br><br> <label for="lname">Last name:</label> <input type="text" id="lname" name="lname"><br><br> <input type="submit" value="Submit using GET"> <input type="submit" formmethod="post" value="Submit using POST"> </form>

</body> </html>
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<!DOCTYPE html> <html> <body>

<h1>The input formtarget attribute</h1>

<p>The formtarget attribute specifies a name or a keyword that indicates where to display the response that is received after submitting the form.</p>

<form action="/actionpage.php"> <label for="fname">First name:</label> <input type="text" id="fname" name="fname"><br><br> <label for="lname">Last name:</label> <input type="text" id="lname" name="lname"><br><br> <input type="submit" value="Submit"> <input type="submit" formtarget="blank" value="Submit to a new window/tab"> </form>

</body> </html>
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<!DOCTYPE html> <html> <body>

<h1>The input formnovalidate attribute</h1>

<form action="/action_page.php"> <label for="email">Enter your email:</label> <input type="email" id="email" name="email" required><br><br> <input type="submit" value="Submit"> <input type="submit" formnovalidate="formnovalidate" value="Submit without validation"> </form>

<p><strong>Note:</strong> The formnovalidate attribute of the input tag is not supported in Safari 10 (or earlier).</p>

</body> </html>
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<!DOCTYPE html> <html> <body>

<h1>The form novalidate attribute</h1>

<p>The novalidate attribute specifies that the form data should not be validated when submitted.</p>

<form action="/action_page.php" novalidate> <label for="email">Enter your email:</label> <input type="email" id="email" name="email" required><br><br> <input type="submit" value="Submit"> </form>

<p><strong>Note:</strong> The novalidate attribute of the form tag is not supported in Safari 10 (or earlier).</p>

</body> </html>
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HTML Canvas Graphics The HTML <canvas> element is used to draw graphics on a web page.

The graphic to the left is created with <canvas>. It shows four elements: a red rectangle, a gradient rectangle, a multicolor rectangle, and a multicolor text.

What is HTML Canvas? The HTML <canvas> element is used to draw graphics, on the fly, via JavaScript.

The <canvas> element is only a container for graphics. You must use JavaScript to actually draw the graphics.

Canvas has several methods for drawing paths, boxes, circles, text, and adding images.

Browser Support The numbers in the table specify the first browser version that fully supports the <canvas> element.

Element
<canvas> 4.0 9.0 2.0 3.1 9.0 Canvas Examples A canvas is a rectangular area on an HTML page. By default, a canvas has no border and no content.

The markup looks like this:

<canvas id="myCanvas" width="200" height="100"></canvas> Note: Always specify an id attribute (to be referred to in a script), and a width and height attribute to define the size of the canvas. To add a border, use the style attribute.

Here is an example of a basic, empty canvas:

Example <canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"> </canvas>

Add a JavaScript After creating the rectangular canvas area, you must add a JavaScript to do the drawing.

Here are some examples:

Draw a Line Example <script> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.moveTo(0, 0); ctx.lineTo(200, 100); ctx.stroke(); </script> Draw a Circle Example <script> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.beginPath(); ctx.arc(95, 50, 40, 0, 2 * Math.PI); ctx.stroke(); </script> Draw a Text Example <script> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.font = "30px Arial"; ctx.fillText("Hello World", 10, 50); </script> Stroke Text Example <script> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.font = "30px Arial"; ctx.strokeText("Hello World", 10, 50); </script> Draw Linear Gradient Example <script> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d");

// Create gradient var grd = ctx.createLinearGradient(0, 0, 200, 0); grd.addColorStop(0, "red"); grd.addColorStop(1, "white");

// Fill with gradient ctx.fillStyle = grd; ctx.fillRect(10, 10, 150, 80); </script> Draw Circular Gradient Example <script> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d");

// Create gradient var grd = ctx.createRadialGradient(75, 50, 5, 90, 60, 100); grd.addColorStop(0, "red"); grd.addColorStop(1, "white");

// Fill with gradient ctx.fillStyle = grd; ctx.fillRect(10, 10, 150, 80); </script> Draw Image <script> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); var img = document.getElementById("scream"); ctx.drawImage(img, 10, 10); </script> HTML Canvas Tutorial To learn more about <canvas>, please read our HTML Canvas Tutorial.
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<!DOCTYPE html> <html> <body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;"> Your browser does not support the HTML canvas tag.</canvas>

<script> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.moveTo(0,0); ctx.lineTo(200,100); ctx.stroke(); </script>

</body> </html> aaaaa
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<!DOCTYPE html> <html> <body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;"> Your browser does not support the HTML canvas tag.</canvas>

<script> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.beginPath(); ctx.arc(95,50,40,0,2*Math.PI); ctx.stroke(); </script>

</body> </html>
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<!DOCTYPE html> <html> <body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;"> Your browser does not support the HTML canvas tag.</canvas>

<script> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.font = "30px Arial"; ctx.fillText("Hello World",10,50); </script>

</body> </html>
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<!DOCTYPE html> <html> <body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;"> Your browser does not support the HTML canvas tag.</canvas>

<script> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.font = "30px Arial"; ctx.strokeText("Hello World",10,50); </script>

</body> </html>

aaaaa<!DOCTYPE html> <html> <body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;"> Your browser does not support the HTML canvas tag.</canvas>

<script> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); // Create gradient var grd = ctx.createLinearGradient(0,0,200,0); grd.addColorStop(0,"red"); grd.addColorStop(1,"white"); // Fill with gradient ctx.fillStyle = grd; ctx.fillRect(10,10,150,80); </script>

</body> </html>

aaaaaa

<!DOCTYPE html> <html> <body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"> Your browser does not support the HTML canvas tag. </canvas>

</body> </html>
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<!DOCTYPE html> <html> <body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;"> Your browser does not support the HTML canvas tag.</canvas>

<script> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d");

// Create gradient var grd = ctx.createRadialGradient(75,50,5,90,60,100); grd.addColorStop(0,"red"); grd.addColorStop(1,"white");

// Fill with gradient ctx.fillStyle = grd; ctx.fillRect(10,10,150,80); </script>

</body> </html>
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<!DOCTYPE html> <html> <body>

<p>Image to use:</p> <img id="scream" src="imgthescream.jpg" alt="The Scream" width="220" height="277">

<p>Canvas to fill:</p> <canvas id="myCanvas" width="250" height="300" style="border:1px solid #d3d3d3;"> Your browser does not support the HTML canvas tag.</canvas>

<p><button onclick="myCanvas()">Try it</button></p>

<script> function myCanvas() { var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); var img = document.getElementById("scream"); ctx.drawImage(img,10,10); } </script>

</body> </html>
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HTML SVG Graphics SVG defines vector-based graphics in XML format.

What is SVG? SVG stands for Scalable Vector Graphics SVG is used to define graphics for the Web SVG is a W3C recommendation The HTML <svg> Element The HTML <svg> element is a container for SVG graphics.

SVG has several methods for drawing paths, boxes, circles, text, and graphic images.

Browser Support The numbers in the table specify the first browser version that fully supports the <svg> element.

Element
<svg> 4.0 9.0 3.0 3.2 10.1 SVG Circle Example <!DOCTYPE html> <html> <body>

<svg width="100" height="100"> <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" /> </svg>

</body> </html>

SVG Rectangle

Example <svg width="400" height="100"> <rect width="400" height="100" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" /> </svg> SVG Rounded Rectangle Example <svg width="400" height="180"> <rect x="50" y="20" rx="20" ry="20" width="150" height="150" style="fill:red;stroke:black;stroke-width:5;opacity:0.5" /> </svg> SVG Star Example <svg width="300" height="200"> <polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" /> </svg> SVG Logo SVG Example <svg height="130" width="500"> <defs> <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" /> <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" /> </linearGradient> </defs> <ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)" /> <text fill="#ffffff" font-size="45" font-family="Verdana" x="50" y="86">SVG</text> Sorry, your browser does not support inline SVG. </svg> Differences Between SVG and Canvas SVG is a language for describing 2D graphics in XML.

Canvas draws 2D graphics, on the fly (with a JavaScript).

SVG is XML based, which means that every element is available within the SVG DOM. You can attach JavaScript event handlers for an element.

In SVG, each drawn shape is remembered as an object. If attributes of an SVG object are changed, the browser can automatically re-render the shape.

Canvas is rendered pixel by pixel. In canvas, once the graphic is drawn, it is forgotten by the browser. If its position should be changed, the entire scene needs to be redrawn, including any objects that might have been covered by the graphic.

Comparison of Canvas and SVG The table below shows some important differences between Canvas and SVG:

Canvas SVG Resolution dependent No support for event handlers Poor text rendering capabilities You can save the resulting image as .png or .jpg Well suited for graphic-intensive games Resolution independent Support for event handlers Best suited for applications with large rendering areas (Google Maps) Slow rendering if complex (anything that uses the DOM a lot will be slow) Not suited for game applications SVG Tutorial To learn more about SVG, please read our SVG Tutorial.
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<!DOCTYPE html> <html> <body>

<svg width="100" height="100"> <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" /> Sorry, your browser does not support inline SVG. </svg>

</body> </html>
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<!DOCTYPE html> <html> <body>

<svg width="400" height="100"> <rect width="400" height="100" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" /> Sorry, your browser does not support inline SVG. </svg>

</body> </html>
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​<!DOCTYPE html> <html> <body>

<svg width="400" height="180"> <rect x="50" y="20" rx="20" ry="20" width="150" height="150" style="fill:red;stroke:black;stroke-width:5;opacity:0.5" /> Sorry, your browser does not support inline SVG. </svg>

</body> </html>
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​<!DOCTYPE html> <html> <body>

<svg width="300" height="200"> <polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" /> Sorry, your browser does not support inline SVG. </svg>

</body> </html>
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<!DOCTYPE html> <html> <body>

<svg height="130" width="500"> <defs> <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" /> <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" /> </linearGradient> </defs> <ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)" /> <text fill="#ffffff" font-size="45" font-family="Verdana" x="50" y="86">SVG</text> Sorry, your browser does not support inline SVG. </svg>

</body> </html>
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HTML Multimedia Multimedia on the web is sound, music, videos, movies, and animations.

What is Multimedia? Multimedia comes in many different formats. It can be almost anything you can hear or see, like images, music, sound, videos, records, films, animations, and more.

Web pages often contain multimedia elements of different types and formats.

Browser Support The first web browsers had support for text only, limited to a single font in a single color.

Later came browsers with support for colors, fonts, images, and multimedia!

Multimedia Formats Multimedia elements (like audio or video) are stored in media files.

The most common way to discover the type of a file, is to look at the file extension.

Multimedia files have formats and different extensions like: .wav, .mp3, .mp4, .mpg, .wmv, and .avi.

Common Video Formats Videoformats There are many video formats out there.

The MP4, WebM, and Ogg formats are supported by HTML.

The MP4 format is recommended by YouTube.

Format File Description MPEG .mpg .mpeg MPEG. Developed by the Moving Pictures Expert Group. The first popular video format on the web. Not supported anymore in HTML. AVI .avi AVI (Audio Video Interleave). Developed by Microsoft. Commonly used in video cameras and TV hardware. Plays well on Windows computers, but not in web browsers. WMV .wmv WMV (Windows Media Video). Developed by Microsoft. Commonly used in video cameras and TV hardware. Plays well on Windows computers, but not in web browsers. QuickTime .mov QuickTime. Developed by Apple. Commonly used in video cameras and TV hardware. Plays well on Apple computers, but not in web browsers. RealVideo .rm .ram RealVideo. Developed by Real Media to allow video streaming with low bandwidths. Does not play in web browsers. Flash .swf .flv Flash. Developed by Macromedia. Often requires an extra component (plug-in) to play in web browsers. Ogg .ogg Theora Ogg. Developed by the Xiph.Org Foundation. Supported by HTML. WebM .webm WebM. Developed by Mozilla, Opera, Adobe, and Google. Supported by HTML. MPEG-4 or MP4 .mp4 MP4. Developed by the Moving Pictures Expert Group. Commonly used in video cameras and TV hardware. Supported by all browsers and recommended by YouTube. Note: Only MP4, WebM, and Ogg video are supported by the HTML standard.

Common Audio Formats MP3 is the best format for compressed recorded music. The term MP3 has become synonymous with digital music.

If your website is about recorded music, MP3 is the choice.

Format File Description MIDI .mid .midi MIDI (Musical Instrument Digital Interface). Main format for all electronic music devices like synthesizers and PC sound cards. MIDI files do not contain sound, but digital notes that can be played by electronics. Plays well on all computers and music hardware, but not in web browsers. RealAudio .rm .ram RealAudio. Developed by Real Media to allow streaming of audio with low bandwidths. Does not play in web browsers. WMA .wma WMA (Windows Media Audio). Developed by Microsoft. Plays well on Windows computers, but not in web browsers. AAC .aac AAC (Advanced Audio Coding). Developed by Apple as the default format for iTunes. Plays well on Apple computers, but not in web browsers. WAV .wav WAV. Developed by IBM and Microsoft. Plays well on Windows, Macintosh, and Linux operating systems. Supported by HTML. Ogg .ogg Ogg. Developed by the Xiph.Org Foundation. Supported by HTML. MP3 .mp3 MP3 files are actually the sound part of MPEG files. MP3 is the most popular format for music players. Combines good compression (small files) with high quality. Supported by all browsers. MP4 .mp4 MP4 is a video format, but can also be used for audio. Supported by all browsers. Note: Only MP3, WAV, and Ogg audio are supported by the HTML standard.
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HTML Video The HTML <video> element is used to show a video on a web page.

Example Courtesy of Big Buck Bunny:

The HTML <video> Element To show a video in HTML, use the <video> element:

Example <video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> Your browser does not support the video tag. </video> How it Works The controls attribute adds video controls, like play, pause, and volume.

It is a good idea to always include width and height attributes. If height and width are not set, the page might flicker while the video loads.

The <source> element allows you to specify alternative video files which the browser may choose from. The browser will use the first recognized format.

The text between the <video> and </video> tags will only be displayed in browsers that do not support the <video> element.

HTML <video> Autoplay To start a video automatically use the autoplay attribute:

Example <video width="320" height="240" autoplay> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> Your browser does not support the video tag. </video> The autoplay attribute does not work in mobile devices like iPad and iPhone.

Browser Support The numbers in the table specify the first browser version that fully supports the <video> element.

Element
<video> 4.0 9.0 3.5 4.0 10.5

HTML Video Formats There are three supported video formats: MP4, WebM, and Ogg. The browser support for the different formats is:

Browser MP4 WebM Ogg Edge YES YES YES Chrome YES YES YES Firefox YES YES YES Safari YES YES NO Opera YES YES YES HTML Video - Media Types File Format Media Type MP4 video/mp4 WebM video/webm Ogg video/ogg HTML Video - Methods, Properties, and Events The HTML DOM defines methods, properties, and events for the <video> element.

This allows you to load, play, and pause videos, as well as setting duration and volume.

There are also DOM events that can notify you when a video begins to play, is paused, etc.

Example: Using JavaScript

Play/Pause Big Small Normal

Video courtesy of Big Buck Bunny.

For a full DOM reference, go to our HTML Audio/Video DOM Reference.

HTML Video Tags Tag Description <video> Defines a video or movie <source> Defines multiple media resources for media elements, such as <video> and <audio> <track> Defines text tracks in media players
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<!DOCTYPE html> <html> <body>

<video width="400" controls> <source src="movbbb.mp4" type="video/mp4"> <source src="movbbb.ogg" type="video/ogg"> Your browser does not support HTML video. </video>

<p> Video courtesy of <a href="https://www.bigbuckbunny.org/" target="_blank">Big Buck Bunny</a>. </p>

</body> </html>
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<!DOCTYPE html> <html> <body>

<video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> Your browser does not support the video tag. </video>

</body> </html>
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​<!DOCTYPE html> <html> <body>

<video width="320" height="240" autoplay> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> Your browser does not support the video tag. </video>

<p><b>Note:</b> The autoplay attribute does not work on some mobile devices.</p>

</body> </html>
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<!DOCTYPE html> <html> <body>

<div style="text-align:center"> <button onclick="playPause()">Play/Pause</button> <button onclick="makeBig()">Big</button> <button onclick="makeSmall()">Small</button> <button onclick="makeNormal()">Normal</button> <br><br> <video id="video1" width="420"> <source src="movbbb.mp4" type="video/mp4"> <source src="movbbb.ogg" type="video/ogg"> Your browser does not support HTML video. </video> </div>

<script> var myVideo = document.getElementById("video1");

function playPause() { if (myVideo.paused) myVideo.play(); else myVideo.pause(); }

function makeBig() { myVideo.width = 560; }

function makeSmall() { myVideo.width = 320; }

function makeNormal() { myVideo.width = 420; } </script>

<p>Video courtesy of <a href="https://www.bigbuckbunny.org/" target="_blank">Big Buck Bunny</a>.</p>

</body> </html>
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HTML Audio The HTML <audio> element is used to play an audio file on a web page.

The HTML <audio> Element To play an audio file in HTML, use the <audio> element:

Example <audio controls> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio> HTML Audio - How It Works The controls attribute adds audio controls, like play, pause, and volume.

The <source> element allows you to specify alternative audio files which the browser may choose from. The browser will use the first recognized format.

The text between the <audio> and </audio> tags will only be displayed in browsers that do not support the <audio> element.

Browser Support The numbers in the table specify the first browser version that fully supports the <audio> element.

Element
<audio> 4.0 9.0 3.5 4.0 10.5

HTML Audio Formats There are three supported audio formats: MP3, WAV, and OGG. The browser support for the different formats is:

Browser MP3 WAV OGG Edge/IE YES NO NO Chrome YES YES YES Firefox YES YES YES Safari YES YES NO Opera YES YES YES HTML Audio - Media Types File Format Media Type MP3 audio/mpeg OGG audio/ogg WAV audio/wav HTML Audio - Methods, Properties, and Events The HTML DOM defines methods, properties, and events for the <audio> element.

This allows you to load, play, and pause audios, as well as set duration and volume.

There are also DOM events that can notify you when an audio begins to play, is paused, etc.

For a full DOM reference, go to our HTML Audio/Video DOM Reference.

HTML Audio Tags Tag Description <audio> Defines sound content <source> Defines multiple media resources for media elements, such as <video> and <audio>
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<!DOCTYPE html> <html> <body>

<audio controls> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio>

</body> </html>
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HTML Plug-ins Plug-ins are computer programs that extend the standard functionality of the browser.

Plug-ins Plug-ins were designed to be used for many different purposes:

To run Java applets To run Microsoft ActiveX controls To display Flash movies To display maps To scan for viruses To verify a bank id Warning !

Most browsers no longer support Java Applets and Plug-ins.

ActiveX controls are no longer supported in any browsers.

The support for Shockwave Flash has also been turned off in modern browsers.

The <object> Element The <object> element is supported by all browsers.

The <object> element defines an embedded object within an HTML document.

It was designed to embed plug-ins (like Java applets, PDF readers, and Flash Players) in web pages, but can also be used to include HTML in HTML:

Example <object width="100%" height="500px" data="snippet.html"></object> Or images if you like:

Example <object data="audi.jpeg"></object>

The <embed> Element The <embed> element is supported in all major browsers.

The <embed> element also defines an embedded object within an HTML document.

Web browsers have supported the <embed> element for a long time. However, it has not been a part of the HTML specification before HTML5.

Example <embed src="audi.jpeg"> Note that the <embed> element does not have a closing tag. It can not contain alternative text.

The <embed> element can also be used to include HTML in HTML:

Example <embed width="100%" height="500px" src="snippet.html">
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<!DOCTYPE html> <html> <body>

<object width="100%" height="500px" data="snippet.html"></object>

</body> </html>
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<!DOCTYPE html> <html> <body>

<object data="audi.jpeg"></object>

</body> </html>
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<!DOCTYPE html> <html> <body>

<embed src="audi.jpeg">

</body> </html>
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<!DOCTYPE html> <html> <body>

<embed width="100%" height="500px" src="snippet.html">

</body> </html>
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HTML YouTube Videos The easiest way to play videos in HTML, is to use YouTube.

Struggling with Video Formats? Converting videos to different formats can be difficult and time-consuming.

An easier solution is to let YouTube play the videos in your web page.

YouTube Video Id YouTube will display an id (like tgbNymZ7vqY), when you save (or play) a video.

You can use this id, and refer to your video in the HTML code.

Playing a YouTube Video in HTML To play your video on a web page, do the following:

Upload the video to YouTube Take a note of the video id Define an <iframe> element in your web page Let the src attribute point to the video URL Use the width and height attributes to specify the dimension of the player Add any other parameters to the URL (see below) Example <iframe width="420" height="315" src="https://www.youtube.com/embed/tgbNymZ7vqY"> </iframe> YouTube Autoplay + Mute You can let your video start playing automatically when a user visits the page, by adding autoplay=1 to the YouTube URL.

Note: Automatically starting a video can annoy your visitor and end up causing more harm than good!

Chrome added stricter autoplay policies in 2018. Chromium browsers do not allow autoplay in all cases. However, muted autoplay is always allowed.

Add mute=1 after autoplay=1 to let your video start playing automatically (but muted).

YouTube - Autoplay + Muted <iframe width="420" height="315" src="https://www.youtube.com/embed/tgbNymZ7vqY?autoplay=1&mute=1"> </iframe>

YouTube Playlist A comma separated list of videos to play (in addition to the original URL).

YouTube Loop Add loop=1 to let your video loop forever.

Value 0 (default): The video will play only once.

Value 1: The video will loop (forever).

YouTube - Loop <iframe width="420" height="315" src="https://www.youtube.com/embed/tgbNymZ7vqY?playlist=tgbNymZ7vqY&loop=1"> </iframe> YouTube Controls Add controls=0 to display controls in the video player.

Value 0: Player controls does not display.

Value 1 (default): Player controls display.

YouTube - Controls <iframe width="420" height="315" src="https://www.youtube.com/embed/tgbNymZ7vqY?controls=0"> </iframe>
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<!DOCTYPE html> <html> <body>

<iframe width="420" height="345" src="https://www.youtube.com/embed/tgbNymZ7vqY?controls=0"> </iframe>

</body> </html>
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<!DOCTYPE html> <html> <body>

<iframe width="420" height="345" src="https://www.youtube.com/embed/tgbNymZ7vqY?controls=0"> </iframe>

</body> </html>
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<!DOCTYPE html> <html> <body>

<iframe width="420" height="345" src="https://www.youtube.com/embed/tgbNymZ7vqY"> </iframe>

</body> </html>
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<!DOCTYPE html> <html> <body>

<iframe width="420" height="345" src="https://www.youtube.com/embed/tgbNymZ7vqY?autoplay=1&mute=1"> </iframe>

</body> </html>
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<!DOCTYPE html> <html> <body>

<iframe width="420" height="345" src="https://www.youtube.com/embed/tgbNymZ7vqY?playlist=tgbNymZ7vqY&loop=1"> </iframe>

</body> </html>
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HTML Geolocation API The HTML Geolocation API is used to locate a user's position.

Locate the User's Position The HTML Geolocation API is used to get the geographical position of a user.

Since this can compromise privacy, the position is not available unless the user approves it.

Note: Geolocation is most accurate for devices with GPS, like smartphones.

Browser Support The numbers in the table specify the first browser version that fully supports Geolocation.

API
Geolocation 5.0 - 49.0 (http) 50.0 (https) 9.0 3.5 5.0 16.0 Note: As of Chrome 50, the Geolocation API will only work on secure contexts such as HTTPS. If your site is hosted on an non-secure origin (such as HTTP) the requests to get the users location will no longer function.

Using HTML Geolocation The getCurrentPosition() method is used to return the user's position.

The example below returns the latitude and longitude of the user's position:

Example <script> var x = document.getElementById("demo"); function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition); } else { x.innerHTML = "Geolocation is not supported by this browser."; } }

function showPosition(position) { x.innerHTML = "Latitude: " + position.coords.latitude + "<br>Longitude: " + position.coords.longitude; } </script> Example explained:

Check if Geolocation is supported If supported, run the getCurrentPosition() method. If not, display a message to the user If the getCurrentPosition() method is successful, it returns a coordinates object to the function specified in the parameter (showPosition) The showPosition() function outputs the Latitude and Longitude The example above is a very basic Geolocation script, with no error handling.

Handling Errors and Rejections The second parameter of the getCurrentPosition() method is used to handle errors. It specifies a function to run if it fails to get the user's location:

Example function showError(error) { switch(error.code) { case error.PERMISSIONDENIED: x.innerHTML = "User denied the request for Geolocation." break; case error.POSITIONUNAVAILABLE: x.innerHTML = "Location information is unavailable." break; case error.TIMEOUT: x.innerHTML = "The request to get user location timed out." break; case error.UNKNOWN_ERROR: x.innerHTML = "An unknown error occurred." break; } } Displaying the Result in a Map To display the result in a map, you need access to a map service, like Google Maps.

In the example below, the returned latitude and longitude is used to show the location in a Google Map (using a static image):

Example function showPosition(position) { var latlon = position.coords.latitude + "," + position.coords.longitude;

var imgurl = "https://maps.googleapis.com/maps/api/staticmap?center= "+latlon+"&zoom=14&size=400x300&sensor=false&key=YOURKEY";

document.getElementById("mapholder").innerHTML = "<img src='"+img_url+"'>"; } Location-specific Information This page has demonstrated how to show a user's position on a map.

Geolocation is also very useful for location-specific information, like:

Up-to-date local information Showing Points-of-interest near the user Turn-by-turn navigation (GPS) The getCurrentPosition() Method - Return Data The getCurrentPosition() method returns an object on success. The latitude, longitude and accuracy properties are always returned. The other properties are returned if available:

Property Returns coords.latitude The latitude as a decimal number (always returned) coords.longitude The longitude as a decimal number (always returned) coords.accuracy The accuracy of position (always returned) coords.altitude The altitude in meters above the mean sea level (returned if available) coords.altitudeAccuracy The altitude accuracy of position (returned if available) coords.heading The heading as degrees clockwise from North (returned if available) coords.speed The speed in meters per second (returned if available) timestamp The date/time of the response (returned if available) Geolocation Object - Other interesting Methods The Geolocation object also has other interesting methods:

watchPosition() - Returns the current position of the user and continues to return updated position as the user moves (like the GPS in a car). clearWatch() - Stops the watchPosition() method. The example below shows the watchPosition() method. You need an accurate GPS device to test this (like smartphone):

Example <script> var x = document.getElementById("demo"); function getLocation() { if (navigator.geolocation) { navigator.geolocation.watchPosition(showPosition); } else { x.innerHTML = "Geolocation is not supported by this browser."; } } function showPosition(position) { x.innerHTML = "Latitude: " + position.coords.latitude + "<br>Longitude: " + position.coords.longitude; } </script>
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<!DOCTYPE html> <html> <body>

<p>Click the button to get your coordinates.</p>

<button onclick="getLocation()">Try It</button>

<p id="demo"></p>

<script> var x = document.getElementById("demo");

function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition); } else { x.innerHTML = "Geolocation is not supported by this browser."; } }

function showPosition(position) { x.innerHTML = "Latitude: " + position.coords.latitude + "<br>Longitude: " + position.coords.longitude; } </script>

</body> </html>
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<!DOCTYPE html> <html> <body>

<p>Click the button to get your coordinates.</p>

<button onclick="getLocation()">Try It</button>

<p id="demo"></p>

<script> var x = document.getElementById("demo");

function getLocation() { if (navigator.geolocation) { navigator.geolocation.watchPosition(showPosition); } else { x.innerHTML = "Geolocation is not supported by this browser."; } }

function showPosition(position) { x.innerHTML="Latitude: " + position.coords.latitude + "<br>Longitude: " + position.coords.longitude; } </script>

</body> </html>
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HTML Drag and Drop API In HTML, any element can be dragged and dropped.

Example Drag the W3Schools image into the rectangle.

Drag and Drop Drag and drop is a very common feature. It is when you "grab" an object and drag it to a different location.

Browser Support The numbers in the table specify the first browser version that fully supports Drag and Drop.

API
Drag and Drop 4.0 9.0 3.5 6.0 12.0 HTML Drag and Drop Example The example below is a simple drag and drop example:

Example <!DOCTYPE HTML> <html> <head> <script> function allowDrop(ev) { ev.preventDefault(); }

function drag(ev) { ev.dataTransfer.setData("text", ev.target.id); }

function drop(ev) { ev.preventDefault(); var data = ev.dataTransfer.getData("text"); ev.target.appendChild(document.getElementById(data)); } </script> </head> <body>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

<img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69">

</body> </html> It might seem complicated, but lets go through all the different parts of a drag and drop event.

Make an Element Draggable First of all: To make an element draggable, set the draggable attribute to true:

<img draggable="true"> What to Drag - ondragstart and setData() Then, specify what should happen when the element is dragged.

In the example above, the ondragstart attribute calls a function, drag(event), that specifies what data to be dragged.

The dataTransfer.setData() method sets the data type and the value of the dragged data:

function drag(ev) { ev.dataTransfer.setData("text", ev.target.id); } In this case, the data type is "text" and the value is the id of the draggable element ("drag1").

Where to Drop - ondragover The ondragover event specifies where the dragged data can be dropped.

By default, data/elements cannot be dropped in other elements. To allow a drop, we must prevent the default handling of the element.

This is done by calling the event.preventDefault() method for the ondragover event:

event.preventDefault() Do the Drop - ondrop When the dragged data is dropped, a drop event occurs.

In the example above, the ondrop attribute calls a function, drop(event):

function drop(ev) { ev.preventDefault(); var data = ev.dataTransfer.getData("text"); ev.target.appendChild(document.getElementById(data)); } Code explained:

Call preventDefault() to prevent the browser default handling of the data (default is open as link on drop) Get the dragged data with the dataTransfer.getData() method. This method will return any data that was set to the same type in the setData() method The dragged data is the id of the dragged element ("drag1") Append the dragged element into the drop element More Examples Example How to drag (and drop) an image back and forth between two <div> elements:
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<!DOCTYPE HTML> <html> <head> <style>

div1 {
width: 350px; height: 70px; padding: 10px; border: 1px solid #aaaaaa; } </style> <script> function allowDrop(ev) { ev.preventDefault(); }

function drag(ev) { ev.dataTransfer.setData("text", ev.target.id); }

function drop(ev) { ev.preventDefault(); var data = ev.dataTransfer.getData("text"); ev.target.appendChild(document.getElementById(data)); } </script> </head> <body>

<p>Drag the W3Schools image into the rectangle:</p>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <br> <img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69">

</body> </html>
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<!DOCTYPE HTML> <html> <head> <style>

div1, #div2 {
float: left; width: 100px; height: 35px; margin: 10px; padding: 10px; border: 1px solid black; } </style> <script> function allowDrop(ev) { ev.preventDefault(); }

function drag(ev) { ev.dataTransfer.setData("text", ev.target.id); }

function drop(ev) { ev.preventDefault(); var data = ev.dataTransfer.getData("text"); ev.target.appendChild(document.getElementById(data)); } </script> </head> <body>

<h2>Drag and Drop</h2> <p>Drag the image back and forth between the two div elements.</p>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"> <img src="img_w3slogo.gif" draggable="true" ondragstart="drag(event)" id="drag1" width="88" height="31"> </div>

<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

</body> </html>
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HTML Web Storage API HTML web storage; better than cookies.

What is HTML Web Storage? With web storage, web applications can store data locally within the user's browser.

Before HTML5, application data had to be stored in cookies, included in every server request. Web storage is more secure, and large amounts of data can be stored locally, without affecting website performance.

Unlike cookies, the storage limit is far larger (at least 5MB) and information is never transferred to the server.

Web storage is per origin (per domain and protocol). All pages, from one origin, can store and access the same data.

Browser Support The numbers in the table specify the first browser version that fully supports Web Storage.

API
Web Storage 4.0 8.0 3.5 4.0 11.5 HTML Web Storage Objects HTML web storage provides two objects for storing data on the client:

window.localStorage - stores data with no expiration date window.sessionStorage - stores data for one session (data is lost when the browser tab is closed) Before using web storage, check browser support for localStorage and sessionStorage:

if (typeof(Storage) !== "undefined") { // Code for localStorage/sessionStorage. } else { // Sorry! No Web Storage support.. }

The localStorage Object The localStorage object stores the data with no expiration date. The data will not be deleted when the browser is closed, and will be available the next day, week, or year.

Example // Store localStorage.setItem("lastname", "Smith");

// Retrieve document.getElementById("result").innerHTML = localStorage.getItem("lastname"); Example explained:

Create a localStorage name/value pair with name="lastname" and value="Smith" Retrieve the value of "lastname" and insert it into the element with id="result" The example above could also be written like this:

// Store localStorage.lastname = "Smith"; // Retrieve document.getElementById("result").innerHTML = localStorage.lastname; The syntax for removing the "lastname" localStorage item is as follows:

localStorage.removeItem("lastname"); Note: Name/value pairs are always stored as strings. Remember to convert them to another format when needed!

The following example counts the number of times a user has clicked a button. In this code the value string is converted to a number to be able to increase the counter:

Example if (localStorage.clickcount) { localStorage.clickcount = Number(localStorage.clickcount) + 1; } else { localStorage.clickcount = 1; } document.getElementById("result").innerHTML = "You have clicked the button " + localStorage.clickcount + " time(s)."; The sessionStorage Object The sessionStorage object is equal to the localStorage object, except that it stores the data for only one session. The data is deleted when the user closes the specific browser tab.

The following example counts the number of times a user has clicked a button, in the current session:

Example if (sessionStorage.clickcount) { sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1; } else { sessionStorage.clickcount = 1; } document.getElementById("result").innerHTML = "You have clicked the button " + sessionStorage.clickcount + " time(s) in this session.";
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<!DOCTYPE html> <html> <body>

<div id="result"></div>

<script> // Check browser support if (typeof(Storage) !== "undefined") { // Store localStorage.setItem("lastname", "Smith"); // Retrieve document.getElementById("result").innerHTML = localStorage.getItem("lastname"); } else { document.getElementById("result").innerHTML = "Sorry, your browser does not support Web Storage…"; } </script>

</body> </html>

ccccc

<!DOCTYPE html> <html> <head> <script> function clickCounter() { if (typeof(Storage) !== "undefined") { if (localStorage.clickcount) { localStorage.clickcount = Number(localStorage.clickcount)+1; } else { localStorage.clickcount = 1; } document.getElementById("result").innerHTML = "You have clicked the button " + localStorage.clickcount + " time(s)."; } else { document.getElementById("result").innerHTML = "Sorry, your browser does not support web storage…"; } } </script> </head> <body>

<p><button onclick="clickCounter()" type="button">Click me!</button></p> <div id="result"></div> <p>Click the button to see the counter increase.</p> <p>Close the browser tab (or window), and try again, and the counter will continue to count (is not reset).</p>

</body> </html>
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<!DOCTYPE html> <html> <head> <script> function clickCounter() { if (typeof(Storage) !== "undefined") { if (sessionStorage.clickcount) { sessionStorage.clickcount = Number(sessionStorage.clickcount)+1; } else { sessionStorage.clickcount = 1; } document.getElementById("result").innerHTML = "You have clicked the button " + sessionStorage.clickcount + " time(s) in this session."; } else { document.getElementById("result").innerHTML = "Sorry, your browser does not support web storage…"; } } </script> </head> <body>

<p><button onclick="clickCounter()" type="button">Click me!</button></p> <div id="result"></div> <p>Click the button to see the counter increase.</p> <p>Close the browser tab (or window), and try again, and the counter is reset.</p>

</body> </html> bbbbbbbbbbbbbbbbbb
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HTML Web Workers API A web worker is a JavaScript running in the background, without affecting the performance of the page.

What is a Web Worker? When executing scripts in an HTML page, the page becomes unresponsive until the script is finished.

A web worker is a JavaScript that runs in the background, independently of other scripts, without affecting the performance of the page. You can continue to do whatever you want: clicking, selecting things, etc., while the web worker runs in the background.

Browser Support The numbers in the table specify the first browser version that fully support Web Workers.

API
Web Workers 4.0 10.0 3.5 4.0 11.5 HTML Web Workers Example The example below creates a simple web worker that count numbers in the background:

Example Count numbers: Start Worker Stop Worker Check Web Worker Support Before creating a web worker, check whether the user's browser supports it:

if (typeof(Worker) !== "undefined") { // Yes! Web worker support! // Some code….. } else { // Sorry! No Web Worker support.. }

Create a Web Worker File Now, let's create our web worker in an external JavaScript.

Here, we create a script that counts. The script is stored in the "demo_workers.js" file:

var i = 0;

function timedCount() { i = i + 1; postMessage(i); setTimeout("timedCount()",500); }

timedCount(); The important part of the code above is the postMessage() method - which is used to post a message back to the HTML page.

Note: Normally web workers are not used for such simple scripts, but for more CPU intensive tasks.

Create a Web Worker Object Now that we have the web worker file, we need to call it from an HTML page.

The following lines checks if the worker already exists, if not - it creates a new web worker object and runs the code in "demo_workers.js":

if (typeof(w) == "undefined") { w = new Worker("demo_workers.js"); } Then we can send and receive messages from the web worker.

Add an "onmessage" event listener to the web worker.

w.onmessage = function(event){ document.getElementById("result").innerHTML = event.data; }; When the web worker posts a message, the code within the event listener is executed. The data from the web worker is stored in event.data.

Terminate a Web Worker When a web worker object is created, it will continue to listen for messages (even after the external script is finished) until it is terminated.

To terminate a web worker, and free browser/computer resources, use the terminate() method:

w.terminate(); Reuse the Web Worker If you set the worker variable to undefined, after it has been terminated, you can reuse the code:

w = undefined; Full Web Worker Example Code We have already seen the Worker code in the .js file. Below is the code for the HTML page:

Example <!DOCTYPE html> <html> <body>

<p>Count numbers: <output id="result"></output></p> <button onclick="startWorker()">Start Worker</button> <button onclick="stopWorker()">Stop Worker</button>

<script> var w;

function startWorker() { if (typeof(Worker) !== "undefined") { if (typeof(w) == "undefined") { w = new Worker("demo_workers.js"); } w.onmessage = function(event) { document.getElementById("result").innerHTML = event.data; }; } else { document.getElementById("result").innerHTML = "Sorry! No Web Worker support."; } }

function stopWorker() { w.terminate(); w = undefined; } </script>

</body> </html> Web Workers and the DOM Since web workers are in external files, they do not have access to the following JavaScript objects:

The window object The document object The parent object
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<!DOCTYPE html> <html> <body>

<p>Count numbers: <output id="result"></output></p> <button onclick="startWorker()">Start Worker</button> <button onclick="stopWorker()">Stop Worker</button>

<p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support Web Workers.</p>

<script> var w;

function startWorker() { if(typeof(Worker) !== "undefined") { if(typeof(w) == "undefined") { w = new Worker("demo_workers.js"); } w.onmessage = function(event) { document.getElementById("result").innerHTML = event.data; }; } else { document.getElementById("result").innerHTML = "Sorry, your browser does not support Web Workers…"; } }

function stopWorker() { w.terminate(); w = undefined; } </script>

</body> </html>
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<!DOCTYPE html> <html> <body>

<p>Count numbers: <output id="result"></output></p> <button onclick="startWorker()">Start Worker</button> <button onclick="stopWorker()">Stop Worker</button>

<p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support Web Workers.</p>

<script> var w;

function startWorker() { if(typeof(Worker) !== "undefined") { if(typeof(w) == "undefined") { w = new Worker("demo_workers.js"); } w.onmessage = function(event) { document.getElementById("result").innerHTML = event.data; }; } else { document.getElementById("result").innerHTML = "Sorry, your browser does not support Web Workers…"; } }

function stopWorker() { w.terminate(); w = undefined; } </script>

</body> </html>
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HTML SSE API Server-Sent Events (SSE) allow a web page to get updates from a server.

Server-Sent Events - One Way Messaging A server-sent event is when a web page automatically gets updates from a server.

This was also possible before, but the web page would have to ask if any updates were available. With server-sent events, the updates come automatically.

Examples: Facebook/Twitter updates, stock price updates, news feeds, sport results, etc.

Browser Support The numbers in the table specify the first browser version that fully support server-sent events.

API
SSE 6.0 79.0 6.0 5.0 11.5 Receive Server-Sent Event Notifications The EventSource object is used to receive server-sent event notifications:

Example var source = new EventSource("demo_sse.php"); source.onmessage = function(event) { document.getElementById("result").innerHTML += event.data + "<br>"; }; Example explained:

Create a new EventSource object, and specify the URL of the page sending the updates (in this example "demo_sse.php") Each time an update is received, the onmessage event occurs When an onmessage event occurs, put the received data into the element with id="result" Check Server-Sent Events Support In the tryit example above there were some extra lines of code to check browser support for server-sent events:

if(typeof(EventSource) !== "undefined") { // Yes! Server-sent events support! // Some code….. } else { // Sorry! No server-sent events support.. }

Server-Side Code Example For the example above to work, you need a server capable of sending data updates (like PHP or ASP).

The server-side event stream syntax is simple. Set the "Content-Type" header to "text/event-stream". Now you can start sending event streams.

Code in PHP (demo_sse.php):

<?php header('Content-Type: text/event-stream'); header('Cache-Control: no-cache');

$time = date('r'); echo "data: The server time is: {$time}\n\n"; flush(); ?> Code in ASP (VB) (demo_sse.asp):

<% Response.ContentType = "text/event-stream" Response.Expires = -1 Response.Write("data: The server time is: " & now()) Response.Flush() %> Code explained:

Set the "Content-Type" header to "text/event-stream" Specify that the page should not cache Output the data to send (Always start with "data: ") Flush the output data back to the web page The EventSource Object In the examples above we used the onmessage event to get messages. But other events are also available:

Events Description onopen When a connection to the server is opened onmessage When a message is received onerror When an error occurs
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<!DOCTYPE html> <html> <body>

<h1>Getting server updates</h1> <div id="result"></div>

<script> if(typeof(EventSource) !== "undefined") { var source = new EventSource("demo_sse.php"); source.onmessage = function(event) { document.getElementById("result").innerHTML += event.data + "<br>"; }; } else { document.getElementById("result").innerHTML = "Sorry, your browser does not support server-sent events…"; } </script>

</body> </html>
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HTML Quiz You can test your HTML skills with W3Schools' Quiz.

The Test The test contains 40 questions and there is no time limit.

The test is not official, it's just a nice way to see how much you know, or don't know, about HTML.

Count Your Score You will get 1 point for each correct answer. At the end of the Quiz, your total score will be displayed. Maximum score is 40 points.

Start the Quiz Good luck!

If you don't know HTML, we suggest that you read our HTML Tutorial from scratch.

W3Schools Certification W3Schools' Online Certification The perfect solution for professionals who need to balance work, family, and career building.

More than 25 000 certificates already issued!

The HTML Certificate documents your knowledge of HTML.

The CSS Certificate documents your knowledge of advanced CSS.

The JavaScript Certificate documents your knowledge of JavaScript and HTML DOM.

The Python Certificate documents your knowledge of Python.

The jQuery Certificate documents your knowledge of jQuery.

The SQL Certificate documents your knowledge of SQL.

The PHP Certificate documents your knowledge of PHP and MySQL.

The XML Certificate documents your knowledge of XML, XML DOM and XSLT.

The Bootstrap Certificate documents your knowledge of the Bootstrap framework.
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HTML Exercises You can test your HTML skills with W3Schools' Exercises.

Exercises We have gathered a variety of HTML exercises (with answers) for each HTML Chapter.

Try to solve an exercise by editing some code. Get a "hint" if you're stuck, or show the answer to see what you've done wrong.

Count Your Score You will get 1 point for each correct answer. Your score and total score will always be displayed.

Start HTML Exercises Good luck!

If you don't know HTML, we suggest that you read our HTML Tutorial from scratch.

W3Schools Certification W3Schools' Online Certification The perfect solution for professionals who need to balance work, family, and career building.

More than 25 000 certificates already issued!

The HTML Certificate documents your knowledge of HTML.

The CSS Certificate documents your knowledge of advanced CSS.

The JavaScript Certificate documents your knowledge of JavaScript and HTML DOM.

The Python Certificate documents your knowledge of Python.

The jQuery Certificate documents your knowledge of jQuery.

The SQL Certificate documents your knowledge of SQL.

The PHP Certificate documents your knowledge of PHP and MySQL.

The XML Certificate documents your knowledge of XML, XML DOM and XSLT.

The Bootstrap Certificate documents your knowledge of the Bootstrap framework.
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w3schools.comLOG INTHE WORLD'S LARGEST WEB DEVELOPER SITE HTML Tutorial HTML HOME HTML Introduction HTML Editors HTML Basic HTML Elements HTML Attributes HTML Headings HTML Paragraphs HTML Styles HTML Formatting HTML Quotations HTML Comments HTML Colors HTML CSS HTML Links HTML Images HTML Tables HTML Lists HTML Block & Inline HTML Classes HTML Id HTML Iframes HTML JavaScript HTML File Paths HTML Head HTML Layout HTML Responsive HTML Computercode HTML Semantics HTML Style Guide HTML Entities HTML Symbols HTML Emojis HTML Charset HTML URL Encode HTML vs. XHTML

HTML Forms HTML Forms HTML Form Attributes HTML Form Elements HTML Input Types HTML Input Attributes HTML Input Form Attributes

HTML Graphics HTML Canvas HTML SVG

HTML Media HTML Media HTML Video HTML Audio HTML Plug-ins HTML YouTube

HTML APIs HTML Geolocation HTML Drag/Drop HTML Web Storage HTML Web Workers HTML SSE

HTML Examples HTML Examples HTML Quiz HTML Exercises HTML Certificate HTML Summary HTML Accessibility

HTML References HTML Tag List HTML Attributes HTML Global Attributes HTML Browser Support HTML Events HTML Colors HTML Canvas HTML Audio/Video HTML Doctypes HTML Character Sets HTML URL Encode HTML Lang Codes HTTP Messages HTTP Methods PX to EM Converter Keyboard Shortcuts

W3Schools HTML Certificate W3Schools Certified
W3Schools offers an Online Certification Program.

The perfect solution for busy professionals who need to balance work, family, and career building.

More than 25 000 certificates already issued!

Document Your Skills Knowledge is power, especially in the current job market. Documentation of your skills enables you to advance your career, or help you to start a new one.

Get a Certificate Getting a certificate proves your commitment to upgrade your skills, gives you the credibility needed for more responsibilities, larger projects, and a higher salary.

W3Schools Certificate How Does It Work? Study for free at W3Schools.com Study at your own speed Test your skills with W3Schools online quizzes Apply for your certificate by paying an exam fee Take your exam online, at any time, and from any location
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w3schools.comLOG INTHE WORLD'S LARGEST WEB DEVELOPER SITE HTML Tutorial HTML HOME HTML Introduction HTML Editors HTML Basic HTML Elements HTML Attributes HTML Headings HTML Paragraphs HTML Styles HTML Formatting HTML Quotations HTML Comments HTML Colors HTML CSS HTML Links HTML Images HTML Tables HTML Lists HTML Block & Inline HTML Classes HTML Id HTML Iframes HTML JavaScript HTML File Paths HTML Head HTML Layout HTML Responsive HTML Computercode HTML Semantics HTML Style Guide HTML Entities HTML Symbols HTML Emojis HTML Charset HTML URL Encode HTML vs. XHTML

HTML Forms HTML Forms HTML Form Attributes HTML Form Elements HTML Input Types HTML Input Attributes HTML Input Form Attributes

HTML Graphics HTML Canvas HTML SVG

HTML Media HTML Media HTML Video HTML Audio HTML Plug-ins HTML YouTube

HTML APIs HTML Geolocation HTML Drag/Drop HTML Web Storage HTML Web Workers HTML SSE

HTML Examples HTML Examples HTML Quiz HTML Exercises HTML Certificate HTML Summary HTML Accessibility

HTML References HTML Tag List HTML Attributes HTML Global Attributes HTML Browser Support HTML Events HTML Colors HTML Canvas HTML Audio/Video HTML Doctypes HTML Character Sets HTML URL Encode HTML Lang Codes HTTP Messages HTTP Methods PX to EM Converter Keyboard Shortcuts

You Have Learned HTML, Now What? HTML Summary This tutorial has taught you how to use HTML to create your own web site.

HTML is the universal markup language for the Web. HTML lets you format text, add graphics, create links, input forms, frames and tables, etc., and save it all in a text file that any browser can read and display.

For more information on HTML, please take a look at our HTML examples and our HTML reference.

You can also test your HTML skills with HTML Exercises and HTML Quizzes.

Now You Know HTML, What's Next? Learn CSS CSS lets you style your HTML pages.

CSS gives you total control of the layout, without messing up the document content.

To learn more about CSS, please visit our CSS tutorial.

Learn JavaScript JavaScript makes your website more dynamic. A dynamic website can react to events and allow user interaction.

JavaScript is the most popular scripting language on the internet and it works with all major browsers.

If you want to learn more about JavaScript, please visit our JavaScript tutorial.

Publishing Your Website To make your website available to the world, you must publish it.

For this, you have two options:

Use an Internet Service Provider Host your own website Using an Internet Service Provider An Internet service provider (ISP) is a company that provides services for accessing and using the Internet.

Internet services typically provided by ISPs include Internet access, Internet transit, domain name registration, web hosting, Usenet service, and colocation.

Using an Internet Service Provider (ISP) is the most common option.

Advantages: Connection Speed - ISPs have very fast connections to the internet. Powerful Hardware - ISPs have powerful web servers that can be shared by several clients. You can also expect an effective load balancing and necessary backup servers Security and Stability - ISPs are specialists on web hosting. Expect more than 99% up time, the latest software patches, and the best virus protection Things to Consider: 24-hour support - The ISP should offer 24-hours support. Toll-free phone could also be vital Daily Backup - The ISP must run a daily backup routine Traffic Volume - Check the ISP's traffic volume restrictions (do not end up paying a fortune for unexpected high traffic) Bandwidth or Content Restrictions - Check the ISP's bandwidth and content restrictions (Is it possible to publish pictures, video, or sound?) E-mail Capabilities - Make sure the ISP supports the e-mail capabilities you need Database Access - Make sure the ISP supports the database access you need Hosting Your Own Website Hosting your own website, on your own server, is also an option.

Things to Consider: Hardware Expenses - To run a "real" web site, you must buy powerful server hardware (a low cost PC will not do the job). You will also need a permanent (24/7) high-speed connection Software Expenses - Server-licenses are often higher than client-licenses. Server-licenses also might have limits on number of users Labor Expenses - Don't expect low labor expenses. You have to install your own hardware and software. You also have to deal with bugs and viruses, and keep your server constantly running W3Schools Certification W3Schools' Online Certification The perfect solution for professionals who need to balance work, family, and career building.

More than 25 000 certificates already issued!

The HTML Certificate documents your knowledge of HTML.

The CSS Certificate documents your knowledge of advanced CSS.

The JavaScript Certificate documents your knowledge of JavaScript and HTML DOM.

The Python Certificate documents your knowledge of Python.

The jQuery Certificate documents your knowledge of jQuery.

The SQL Certificate documents your knowledge of SQL.

The PHP Certificate documents your knowledge of PHP and MySQL.

The XML Certificate documents your knowledge of XML, XML DOM and XSLT.

The Bootstrap Certificate documents your knowledge of the Bootstrap framework.
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w3schools.comLOG INTHE WORLD'S LARGEST WEB DEVELOPER SITE HTML Tutorial HTML HOME HTML Introduction HTML Editors HTML Basic HTML Elements HTML Attributes HTML Headings HTML Paragraphs HTML Styles HTML Formatting HTML Quotations HTML Comments HTML Colors HTML CSS HTML Links HTML Images HTML Tables HTML Lists HTML Block & Inline HTML Classes HTML Id HTML Iframes HTML JavaScript HTML File Paths HTML Head HTML Layout HTML Responsive HTML Computercode HTML Semantics HTML Style Guide HTML Entities HTML Symbols HTML Emojis HTML Charset HTML URL Encode HTML vs. XHTML

HTML Forms HTML Forms HTML Form Attributes HTML Form Elements HTML Input Types HTML Input Attributes HTML Input Form Attributes

HTML Graphics HTML Canvas HTML SVG

HTML Media HTML Media HTML Video HTML Audio HTML Plug-ins HTML YouTube

HTML APIs HTML Geolocation HTML Drag/Drop HTML Web Storage HTML Web Workers HTML SSE

HTML Examples HTML Examples HTML Quiz HTML Exercises HTML Certificate HTML Summary HTML Accessibility

HTML References HTML Tag List HTML Attributes HTML Global Attributes HTML Browser Support HTML Events HTML Colors HTML Canvas HTML Audio/Video HTML Doctypes HTML Character Sets HTML URL Encode HTML Lang Codes HTTP Messages HTTP Methods PX to EM Converter Keyboard Shortcuts

HTML Accessibility HTML Accessibility Always write HTML code with accessibility in mind!

Provide the user a good way to navigate and interact with your site. Make your HTML code as semantic as possible.

Semantic HTML Semantic HTML means using correct HTML elements for their correct purpose as much as possible. Semantic elements are elements with a meaning; if you need a button, use the <button> element (and not a <div> element).

Semantic <button>Click Me</button> Non-semantic <div>Click Me</div> Semantic HTML gives context to screen readers, which read the contents of a page out loud.

With the button example in mind:

buttons have more suitable styling by default a screen reader identifies it as a button focusable clickable A button is also accessible for people relying on keyboard-only navigation; it can be clickable with both mouse and keys, and it can be tabbed between (using the tab key on the keyboard).

Examples of non-semantic elements: <div> and <span> - Tells nothing about its content.

Examples of semantic elements: <form>, <table>, and <article> - Clearly defines its content.

Headings Are Important Headings are defined with the <h1> to <h6> tags:

Example <h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6> Search engines use the headings to index the structure and content of your web pages.

Users skim your pages by its headings. It is important to use headings to show the document structure and the relationships between different sections.

<h1> headings should be used for main headings, followed by <h2> headings, then the less important <h3>, and so on.

Note: Use HTML headings for headings only. Don't use headings to make text BIG or bold.

Alternative Text The alt attribute provides an alternate text for an image, if the user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader).

The value of the alt attribute should describe the image:

Example <img src="img_chania.jpg" alt="Flowers in Chania"> If a browser cannot find an image, it will display the value of the alt attribute:

Example <img src="wrongname.gif" alt="Flowers in Chania"> Declare the Language You should always include the lang attribute inside the <html> tag, to declare the language of the Web page. This is meant to assist search engines and browsers.

The following example specifies English as the language:

<!DOCTYPE html> <html lang="en"> <body>

…

</body> </html> Use Clear Language Always use a clear language, that is easy to understand. Also try to avoid characters that cannot be read clearly by a screen reader. For example:

Keep sentences as short as possible Avoid dashes. Instead of writing 1-3, write 1 to 3 Avoid abbreviations. Instead of writing Feb, write February Avoid slang words Create Good Link Text A link text should explain clearly what information the reader will get by clicking on that link.

Examples of good and bad links:

Good Find out more about the HTML language

Read more about how to eat healthy

Buy tickets to Mars here

Bad Click here

Read more..

Buy tickets to Mars here

The title Attribute The title attribute specifies extra information about an element.

The information is most often shown as a tooltip text when the mouse moves over the element.

The title attribute can be used on any HTML element (it will validate on any HTML element. However, it is not necessarily useful).

Example <p><abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>

<p title="Free Web tutorials">W3Schools.com</p>
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<!DOCTYPE html> <html> <body>

<h1>Semantic HTML</h1> <p>Semantic HTML means using correct HTML elements for their correct purpose as much as possible.</p> <p>If you need a button, use the button element and not a div element:</p>

<button>Click Me</button>

<div>Click Me</div>

<p>A button element has more suitable styling than a div, and it is clickable by default.</p>

</body> </html>
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<!DOCTYPE html> <html> <body>

<h1>Semantic HTML</h1> <p>Semantic HTML means using correct HTML elements for their correct purpose as much as possible.</p> <p>If you need a button, use the button element and not a div element:</p>

<button>Click Me</button>

<div>Click Me</div>

<p>A button element has more suitable styling than a div, and it is clickable by default.</p>

</body> </html>
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<!DOCTYPE html> <html> <body>

<h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6>

</body> </html>
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<!DOCTYPE html> <html> <body>

<h2>Alternative text</h2>

<p>The alt attribute should reflect the image content, so users who cannot see the image gets an understanding of what the image contains:</p>

<img src="img_chania.jpg" alt="Flowers in Chania" width="460" height="345">

</body> </html>
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<!DOCTYPE html> <html> <body>

<p>If a browser cannot find the image, it will display the alternate text:</p>

<img src="wrongname.gif" alt="Flowers in Chania">

</body> </html>
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<!DOCTYPE html> <html> <body>

<h2>Create Good Link Text</h2> <p>A link should explain clearly what information the reader will get by clicking on that link.</p>

<p>Examples of bad links:</p> <ul> <li><a href="#">Click here</a></li> <li><a href="#">Read more..</a></li> <li>Buy tickets to Mars <a href="#">here</a></li> </ul>

<p>Examples of good links:</p> <ul> <li><a href="#">Find out more about the HTML language</a></li> <li>Read more about <a href="#">how to eat healthy</a></li> <li><a href="#">Buy tickets to Mars here</a></li> </ul>

<p>Note that these are just link examples, and will not send you away when you click on them.</p>

</body> </html>
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<!DOCTYPE html> <html> <body>

<h2>Create Good Link Text</h2> <p>A link should explain clearly what information the reader will get by clicking on that link.</p>

<p>Examples of bad links:</p> <ul> <li><a href="#">Click here</a></li> <li><a href="#">Read more..</a></li> <li>Buy tickets to Mars <a href="#">here</a></li> </ul>

<p>Examples of good links:</p> <ul> <li><a href="#">Find out more about the HTML language</a></li> <li>Read more about <a href="#">how to eat healthy</a></li> <li><a href="#">Buy tickets to Mars here</a></li> </ul>

<p>Note that these are just link examples, and will not send you away when you click on them.</p>

</body> </html>
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<!DOCTYPE html> <html> <body>

<p><abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>

<p title="Free Web tutorials">W3Schools.com</p>

</body> </html>
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HTML Tags <!--> <!DOCTYPE> <a> <abbr> <acronym> <address> <applet> <area> <article> <aside> <audio> <b> <base> <basefont> <bdi> <bdo> <big> <blockquote> <body> <br> <button> <canvas> <caption> <center> <cite> <code> <col> <colgroup> <data> <datalist> <dd> <del> <details> <dfn> <dialog> <dir> <div> <dl> <dt> <em> <embed> <fieldset> <figcaption> <figure> <font> <footer> <form> <frame> <frameset> <h1> - <h6> <head> <header> <hr> <html> <i> <iframe> <img> <input> <ins> <kbd> <label> <legend> <li> <link> <main> <map> <mark> <meta> <meter> <nav> <noframes> <noscript> <object> <ol> <optgroup> <option> <output> <p> <param> <picture> <pre> <progress> <q> <rp> <rt> <ruby> <s> <samp> <script> <section> <select> <small> <source> <span> <strike> <strong> <style> <sub> <summary> <sup> <svg> <table> <tbody> <td> <template> <textarea> <tfoot> <th> <thead> <time> <title> <tr> <track> <tt> <u> <ul> <var> <video> <wbr>

HTML Element Reference HTML Tags Ordered Alphabetically Search.. Tag Description <!--…--> Defines a comment <!DOCTYPE> Defines the document type <a> Defines a hyperlink <abbr> Defines an abbreviation or an acronym <acronym> Not supported in HTML5. Use <abbr> instead. Defines an acronym <address> Defines contact information for the author/owner of a document <applet> Not supported in HTML5. Use <embed> or <object> instead. Defines an embedded applet <area> Defines an area inside an image map <article> Defines an article <aside> Defines content aside from the page content <audio> Defines embedded sound content <b> Defines bold text <base> Specifies the base URL/target for all relative URLs in a document <basefont> Not supported in HTML5. Use CSS instead. Specifies a default color, size, and font for all text in a document <bdi> Isolates a part of text that might be formatted in a different direction from other text outside it <bdo> Overrides the current text direction <big> Not supported in HTML5. Use CSS instead. Defines big text <blockquote> Defines a section that is quoted from another source <body> Defines the document's body <br> Defines a single line break <button> Defines a clickable button <canvas> Used to draw graphics, on the fly, via scripting (usually JavaScript) <caption> Defines a table caption <center> Not supported in HTML5. Use CSS instead. Defines centered text <cite> Defines the title of a work <code> Defines a piece of computer code <col> Specifies column properties for each column within a <colgroup> element <colgroup> Specifies a group of one or more columns in a table for formatting <data> Adds a machine-readable translation of a given content <datalist> Specifies a list of pre-defined options for input controls <dd> Defines a description/value of a term in a description list <del> Defines text that has been deleted from a document <details> Defines additional details that the user can view or hide <dfn> Specifies a term that is going to be defined within the content <dialog> Defines a dialog box or window <dir> Not supported in HTML5. Use <ul> instead. Defines a directory list <div> Defines a section in a document <dl> Defines a description list <dt> Defines a term/name in a description list <em> Defines emphasized text <embed> Defines a container for an external application <fieldset> Groups related elements in a form <figcaption> Defines a caption for a <figure> element <figure> Specifies self-contained content <font> Not supported in HTML5. Use CSS instead. Defines font, color, and size for text <footer> Defines a footer for a document or section <form> Defines an HTML form for user input <frame> Not supported in HTML5. Defines a window (a frame) in a frameset <frameset> Not supported in HTML5. Defines a set of frames <h1> to <h6> Defines HTML headings <head> Contains metadata/information for the document <header> Defines a header for a document or section <hr> Defines a thematic change in the content <html> Defines the root of an HTML document <i> Defines a part of text in an alternate voice or mood <iframe> Defines an inline frame <img> Defines an image <input> Defines an input control <ins> Defines a text that has been inserted into a document <kbd> Defines keyboard input <label> Defines a label for an <input> element <legend> Defines a caption for a <fieldset> element <li> Defines a list item <link> Defines the relationship between a document and an external resource (most used to link to style sheets) <main> Specifies the main content of a document <map> Defines an image map <mark> Defines marked/highlighted text <meta> Defines metadata about an HTML document <meter> Defines a scalar measurement within a known range (a gauge) <nav> Defines navigation links <noframes> Not supported in HTML5. Defines an alternate content for users that do not support frames <noscript> Defines an alternate content for users that do not support client-side scripts <object> Defines a container for an external application <ol> Defines an ordered list <optgroup> Defines a group of related options in a drop-down list <option> Defines an option in a drop-down list <output> Defines the result of a calculation <p> Defines a paragraph <param> Defines a parameter for an object <picture> Defines a container for multiple image resources <pre> Defines preformatted text <progress> Represents the progress of a task <q> Defines a short quotation <rp> Defines what to show in browsers that do not support ruby annotations <rt> Defines an explanation/pronunciation of characters (for East Asian typography) <ruby> Defines a ruby annotation (for East Asian typography) <s> Defines text that is no longer correct <samp> Defines sample output from a computer program <script> Defines a client-side script <section> Defines a section in a document <select> Defines a drop-down list <small> Defines smaller text <source> Defines multiple media resources for media elements (<video> and <audio>) <span> Defines a section in a document <strike> Not supported in HTML5. Use <del> or <s> instead. Defines strikethrough text <strong> Defines important text <style> Defines style information for a document <sub> Defines subscripted text <summary> Defines a visible heading for a <details> element <sup> Defines superscripted text <svg> Defines a container for SVG graphics <table> Defines a table <tbody> Groups the body content in a table <td> Defines a cell in a table <template> Defines a container for content that should be hidden when the page loads <textarea> Defines a multiline input control (text area) <tfoot> Groups the footer content in a table <th> Defines a header cell in a table <thead> Groups the header content in a table <time> Defines a specific time (or datetime) <title> Defines a title for the document <tr> Defines a row in a table <track> Defines text tracks for media elements (<video> and <audio>) <tt> Not supported in HTML5. Use CSS instead. Defines teletype text <u> Defines some text that is unarticulated and styled differently from normal text <ul> Defines an unordered list <var> Defines a variable <video> Defines embedded video content <wbr> Defines a possible line-break
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HTML Tags <!--> <!DOCTYPE> <a> <abbr> <acronym> <address> <applet> <area> <article> <aside> <audio> <b> <base> <basefont> <bdi> <bdo> <big> <blockquote> <body> <br> <button> <canvas> <caption> <center> <cite> <code> <col> <colgroup> <data> <datalist> <dd> <del> <details> <dfn> <dialog> <dir> <div> <dl> <dt> <em> <embed> <fieldset> <figcaption> <figure> <font> <footer> <form> <frame> <frameset> <h1> - <h6> <head> <header> <hr> <html> <i> <iframe> <img> <input> <ins> <kbd> <label> <legend> <li> <link> <main> <map> <mark> <meta> <meter> <nav> <noframes> <noscript> <object> <ol> <optgroup> <option> <output> <p> <param> <picture> <pre> <progress> <q> <rp> <rt> <ruby> <s> <samp> <script> <section> <select> <small> <source> <span> <strike> <strong> <style> <sub> <summary> <sup> <svg> <table> <tbody> <td> <template> <textarea> <tfoot> <th> <thead> <time> <title> <tr> <track> <tt> <u> <ul> <var> <video> <wbr>

HTML Element Reference - By Category Basic HTML Tag Description <!DOCTYPE> Defines the document type <html> Defines an HTML document <head> Contains metadata/information for the document <title> Defines a title for the document <body> Defines the document's body <h1> to <h6> Defines HTML headings <p> Defines a paragraph <br> Inserts a single line break <hr> Defines a thematic change in the content <!--…--> Defines a comment Formatting Tag Description <acronym> Not supported in HTML5. Use <abbr> instead. Defines an acronym <abbr> Defines an abbreviation or an acronym <address> Defines contact information for the author/owner of a document/article <b> Defines bold text <bdi> Isolates a part of text that might be formatted in a different direction from other text outside it <bdo> Overrides the current text direction <big> Not supported in HTML5. Use CSS instead. Defines big text <blockquote> Defines a section that is quoted from another source <center> Not supported in HTML5. Use CSS instead. Defines centered text <cite> Defines the title of a work <code> Defines a piece of computer code <del> Defines text that has been deleted from a document <dfn> Specifies a term that is going to be defined within the content <em> Defines emphasized text <font> Not supported in HTML5. Use CSS instead. Defines font, color, and size for text <i> Defines a part of text in an alternate voice or mood <ins> Defines a text that has been inserted into a document <kbd> Defines keyboard input <mark> Defines marked/highlighted text <meter> Defines a scalar measurement within a known range (a gauge) <pre> Defines preformatted text <progress> Represents the progress of a task <q> Defines a short quotation <rp> Defines what to show in browsers that do not support ruby annotations <rt> Defines an explanation/pronunciation of characters (for East Asian typography) <ruby> Defines a ruby annotation (for East Asian typography) <s> Defines text that is no longer correct <samp> Defines sample output from a computer program <small> Defines smaller text <strike> Not supported in HTML5. Use <del> or <s> instead. Defines strikethrough text <strong> Defines important text <sub> Defines subscripted text <sup> Defines superscripted text <template> Defines a container for content that should be hidden when the page loads <time> Defines a specific time (or datetime) <tt> Not supported in HTML5. Use CSS instead. Defines teletype text <u> Defines some text that is unarticulated and styled differently from normal text <var> Defines a variable <wbr> Defines a possible line-break

Forms and Input Tag Description <form> Defines an HTML form for user input <input> Defines an input control <textarea> Defines a multiline input control (text area) <button> Defines a clickable button <select> Defines a drop-down list <optgroup> Defines a group of related options in a drop-down list <option> Defines an option in a drop-down list <label> Defines a label for an <input> element <fieldset> Groups related elements in a form <legend> Defines a caption for a <fieldset> element <datalist> Specifies a list of pre-defined options for input controls <output> Defines the result of a calculation Frames Tag Description <frame> Not supported in HTML5. Defines a window (a frame) in a frameset <frameset> Not supported in HTML5. Defines a set of frames <noframes> Not supported in HTML5. Defines an alternate content for users that do not support frames <iframe> Defines an inline frame Images Tag Description <img> Defines an image <map> Defines a client-side image map <area> Defines an area inside an image map <canvas> Used to draw graphics, on the fly, via scripting (usually JavaScript) <figcaption> Defines a caption for a <figure> element <figure> Specifies self-contained content <picture> Defines a container for multiple image resources <svg> Defines a container for SVG graphics Audio / Video Tag Description <audio> Defines sound content <source> Defines multiple media resources for media elements (<video>, <audio> and <picture>) <track> Defines text tracks for media elements (<video> and <audio>) <video> Defines a video or movie Links Tag Description <a> Defines a hyperlink <link> Defines the relationship between a document and an external resource (most used to link to style sheets) <nav> Defines navigation links Lists Tag Description <ul> Defines an unordered list <ol> Defines an ordered list <li> Defines a list item <dir> Not supported in HTML5. Use <ul> instead. Defines a directory list <dl> Defines a description list <dt> Defines a term/name in a description list <dd> Defines a description of a term/name in a description list Tables Tag Description <table> Defines a table <caption> Defines a table caption <th> Defines a header cell in a table <tr> Defines a row in a table <td> Defines a cell in a table <thead> Groups the header content in a table <tbody> Groups the body content in a table <tfoot> Groups the footer content in a table <col> Specifies column properties for each column within a <colgroup> element <colgroup> Specifies a group of one or more columns in a table for formatting Styles and Semantics Tag Description <style> Defines style information for a document <div> Defines a section in a document <span> Defines a section in a document <header> Defines a header for a document or section <footer> Defines a footer for a document or section <main> Specifies the main content of a document <section> Defines a section in a document <article> Defines an article <aside> Defines content aside from the page content <details> Defines additional details that the user can view or hide <dialog> Defines a dialog box or window <summary> Defines a visible heading for a <details> element <data> Adds a machine-readable translation of a given content Meta Info Tag Description <head> Defines information about the document <meta> Defines metadata about an HTML document <base> Specifies the base URL/target for all relative URLs in a document <basefont> Not supported in HTML5. Use CSS instead. Specifies a default color, size, and font for all text in a document Programming Tag Description <script> Defines a client-side script <noscript> Defines an alternate content for users that do not support client-side scripts <applet> Not supported in HTML5. Use <embed> or <object> instead. Defines an embedded applet <embed> Defines a container for an external (non-HTML) application <object> Defines an embedded object <param> Defines a parameter for an object
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HTML Tags <!--> <!DOCTYPE> <a> <abbr> <acronym> <address> <applet> <area> <article> <aside> <audio> <b> <base> <basefont> <bdi> <bdo> <big> <blockquote> <body> <br> <button> <canvas> <caption> <center> <cite> <code> <col> <colgroup> <data> <datalist> <dd> <del> <details> <dfn> <dialog> <dir> <div> <dl> <dt> <em> <embed> <fieldset> <figcaption> <figure> <font> <footer> <form> <frame> <frameset> <h1> - <h6> <head> <header> <hr> <html> <i> <iframe> <img> <input> <ins> <kbd> <label> <legend> <li> <link> <main> <map> <mark> <meta> <meter> <nav> <noframes> <noscript> <object> <ol> <optgroup> <option> <output> <p> <param> <picture> <pre> <progress> <q> <rp> <rt> <ruby> <s> <samp> <script> <section> <select> <small> <source> <span> <strike> <strong> <style> <sub> <summary> <sup> <svg> <table> <tbody> <td> <template> <textarea> <tfoot> <th> <thead> <time> <title> <tr> <track> <tt> <u> <ul> <var> <video> <wbr>

HTML Reference - Browser Support HTML Reference With Browser Support The table below lists all HTML elements and their attributes, along with browser support:

<a> Yes Yes Yes Yes Yes download 14.0 18.0 20.0 10.1 15.0 href Yes Yes Yes Yes Yes hreflang Yes Yes Yes Yes Yes media Yes Yes Yes Yes Yes ping Yes No Yes No Yes referrerpolicy 51.0 79.0 50.0 11.1 38.0 rel Yes Yes Yes Yes Yes target Yes Yes Yes Yes Yes type Yes Yes Yes Yes Yes

<abbr> Yes Yes Yes Yes Yes

<address> Yes Yes Yes Yes Yes

<area> Yes Yes Yes Yes Yes alt Yes Yes Yes Yes Yes coords Yes Yes Yes Yes Yes download Yes Yes Yes Yes Yes href Yes Yes Yes Yes Yes hreflang Yes Yes Yes Yes Yes media Yes Yes Yes Yes Yes referrerpolicy 51.0 79.0 50.0 11.1 38.0 rel Yes Yes Yes Yes Yes shape Yes Yes Yes Yes Yes target Yes Yes Yes Yes Yes type Yes Yes Yes Yes Yes

<article> 6.0 9.0 4.0 5.0 11.1

<aside> 6.0 9.0 4.0 5.0 11.1

<audio> 4.0 9.0 3.5 4.0 11.5 autoplay 4.0 9.0 3.5 4.0 11.5 controls 4.0 9.0 3.5 4.0 11.5 loop 4.0 9.0 3.5 4.0 11.5 muted 4.0 10.0 11.0 7.1 11.5 preload 4.0 9.0 4.0 4.0 11.5 src 4.0 9.0 3.5 4.0 11.5

<b> Yes Yes Yes Yes Yes

<base> Yes Yes Yes Yes Yes href Yes Yes Yes Yes Yes target Yes Yes Yes Yes Yes

<bdi> 16.0 79.0 10.0 No 15.0

<bdo> Yes Yes Yes Yes Yes dir Yes Yes Yes Yes Yes

<blockquote> Yes Yes Yes Yes Yes cite Yes Yes Yes Yes Yes

<body> Yes Yes Yes Yes Yes

<br> Yes Yes Yes Yes Yes

<button> Yes Yes Yes Yes Yes autofocus 5.0 10.0 4.0 5.0 9.6 disabled Yes Yes Yes Yes Yes form 10.0 16.0 4.0 5.1 9.5 formaction 9.0 10.0 4.0 5.1 15.0 formenctype 9.0 10.0 4.0 5.1 11.5 formmethod 9.0 10.0 4.0 5.1 15.0 formnovalidate 6.0 11.0 4.0 Yes Yes formtarget 9.0 10.0 4.0 5.1 10.6 name Yes Yes Yes Yes Yes type Yes Yes Yes Yes Yes value Yes Yes Yes Yes Yes

<canvas> 4.0 9.0 2.0 3.1 9.0 height 4.0 9.0 2.0 3.1 9.0 width 4.0 9.0 2.0 3.1 9.0

<caption> Yes Yes Yes Yes Yes

<cite> Yes Yes Yes Yes Yes

<code> Yes Yes Yes Yes Yes

<col> Yes Yes Yes Yes Yes span Yes Yes Yes Yes Yes

<colgroup> Yes Yes Yes Yes Yes span Yes Yes Yes Yes Yes

<data> 62.0 13.0 22.0 No 49.0 value 62.0 13.0 22.0 No 49.0

<datalist> 20.0 10.0 4.0 12.1 9.5

<dd> Yes Yes Yes Yes Yes

<del> Yes Yes Yes Yes Yes cite Yes Yes Yes Yes Yes datetime Yes Yes Yes Yes Yes

<details> 12.0 79.0 49.0 6.0 15.0 open 12.0 79.0 49.0 6.0 15.0

<dfn> Yes Yes Yes Yes Yes

<dialog> 37.0 79.0 53.0* No 24.0 open 37.0 79.0 53.0* No 24.0

Not supported by default, but can be enabled in about:config (set dom.dialog_element.enabled to true).
<div> Yes Yes Yes Yes Yes

<dl> Yes Yes Yes Yes Yes

<dt> Yes Yes Yes Yes Yes

<em> Yes Yes Yes Yes Yes

<embed> Yes Yes Yes Yes Yes height Yes Yes Yes Yes Yes src Yes Yes Yes Yes Yes type Yes Yes Yes Yes Yes width Yes Yes Yes Yes Yes

<fieldset> Yes Yes Yes Yes Yes disabled Yes Yes Yes 6.0 Yes form Yes Yes Yes Yes Yes name Yes 11.0 Yes Yes Yes

<figcaption> 8.0 9.0 4.0 5.1 11.0

<figure> 8.0 9.0 4.0 5.1 11.0

<footer> 5.0 9.0 4.0 5.0 11.1

<form> Yes Yes Yes Yes Yes accept-charset Yes Yes Yes Yes Yes action Yes Yes Yes Yes Yes autocomplete Yes Yes 4.0 5.2 15.0 enctype Yes Yes Yes Yes Yes method Yes Yes Yes Yes Yes name Yes Yes Yes Yes Yes novalidate Yes 10.0 4.0 10.1 15.0 rel Yes Yes Yes Yes Yes target Yes Yes Yes Yes Yes

<h1> - <h6> Yes Yes Yes Yes Yes

<head> Yes Yes Yes Yes Yes

<header> 5.0 9.0 4.0 5.0 11.1

<hr> Yes Yes Yes Yes Yes

<html> Yes Yes Yes Yes Yes xmlns Yes Yes Yes Yes Yes

<i> Yes Yes Yes Yes Yes

<iframe> Yes Yes Yes Yes Yes allow 60.0 79.0 74.0 11.1 47.0 allowfullscreen 27.0 11.0 -ms- 18.0 7.0 Yes allowpaymentrequest No No No No No height Yes Yes Yes Yes Yes name Yes Yes Yes Yes Yes referrerpolicy 51.0 79.0 50.0 11.1 38.0 sandbox 4.0 10.0 17.0 5.0 15.0 src Yes Yes Yes Yes Yes srcdoc 20.0 79.0 25.0 6.0 15.0 width Yes Yes Yes Yes Yes

<img> Yes Yes Yes Yes Yes alt Yes Yes Yes Yes Yes crossorigin Yes Yes Yes Yes Yes height Yes Yes Yes Yes Yes ismap Yes Yes Yes Yes Yes loading 77.0 79.0 75.0 No 64.0 longdesc Yes Yes Yes Yes Yes referrerpolicy 51.0 79.0 50.0 11.1 38.0 sizes Yes Yes Yes Yes Yes src Yes Yes Yes Yes Yes srcset 34.0 ? 38.0 8.0 21.0 usemap Yes Yes Yes Yes Yes width Yes Yes Yes Yes Yes

<input> Yes Yes Yes Yes Yes accept 26.0 10.0 37.0 11.1 15.0 alt Yes Yes Yes Yes Yes autocomplete 17.0 6.0 2.0 5.1 10.0 autofocus 5.0 11.0 4.0 5.0 9.6 checked Yes Yes Yes Yes Yes dirname Yes 79.0 No Yes Yes disabled Yes Yes Yes Yes Yes form Yes Yes Yes 5.1 10.6 formaction Yes 10.0 Yes 5.1 10.6 formenctype Yes 10.0 Yes 5.1 10.6 formmethod Yes 10.0 Yes 5.1 10.6 formnovalidate Yes 10.0 Yes 10.1 10.6 formtarget Yes 10.0 Yes 5.1 10.6 height Yes Yes 16.0 Yes Yes list 20.0 10.0 4.0 No 9.6 max 5.0 10.0 16.0 5.1 10.6 maxlength 4.0 10.0 4.0 5.1 15.0 min 5.0 10.0 16.0 5.1 10.6 minlength 40.0 17.0 51.0 10.1 27.0 multiple 6.0 10.0 3.6 5.0 11.0 name Yes Yes Yes Yes Yes pattern 5.0 10.0 4.0 10.1 9.6 placeholder 10.0 10.0 4.0 5.0 11.0 readonly Yes Yes Yes Yes Yes required 5.0 10.0 4.0 10.1 9.6 size Yes Yes Yes Yes Yes src Yes Yes Yes Yes Yes step 6.0 10.0 16.0 5.0 10.6 type Yes Yes Yes Yes Yes value Yes Yes Yes Yes Yes width Yes Yes 16.0 Yes Yes

<ins> Yes Yes Yes Yes Yes cite Yes Yes Yes Yes Yes datetime Yes Yes Yes Yes Yes

<kbd> Yes Yes Yes Yes Yes

<label> Yes Yes Yes Yes Yes for Yes Yes Yes Yes Yes form Yes Yes Yes Yes Yes

<legend> Yes Yes Yes Yes Yes

<li> Yes Yes Yes Yes Yes value Yes Yes Yes Yes Yes

<link> Yes Yes Yes Yes Yes crossorigin 25.0 79.0 18.0 ? 15.0 href Yes Yes Yes Yes Yes hreflang Yes Yes Yes Yes Yes media Yes Yes Yes Yes Yes referrerpolicy 51.0 79.0 50.0 11.1 38.0 rel Yes Yes Yes Yes Yes sizes No No No No No title Yes Yes Yes Yes Yes type Yes Yes Yes Yes Yes

<main> 26.0 12.0 21.0 7.0 16.0

<map> Yes Yes Yes Yes Yes name Yes Yes Yes Yes Yes

<mark> 6.0 9.0 4.0 5.0 11.1

<meta> Yes Yes Yes Yes Yes charset Yes Yes Yes Yes Yes content Yes Yes Yes Yes Yes http_equiv Yes Yes Yes Yes Yes name Yes Yes Yes Yes Yes

<meter> 8.0 13.0 16.0 6.0 11.5 form No No No No No high 8.0 13.0 16.0 6.0 11.5 low 8.0 13.0 16.0 6.0 11.5 max 8.0 13.0 16.0 6.0 11.5 min 8.0 13.0 16.0 6.0 11.5 optimum 8.0 13.0 16.0 6.0 11.5 value 8.0 13.0 16.0 6.0 11.5

<nav> 5.0 9.0 4.0 5.0 11.1

<noscript> Yes Yes Yes Yes Yes

<object> Yes Yes Yes Yes Yes data Yes Yes Yes Yes Yes form No No No No No height Yes Yes Yes Yes Yes name Yes Yes Yes Yes Yes type Yes Yes Yes Yes Yes usemap No No Yes No No width Yes Yes Yes Yes Yes

<ol> Yes Yes Yes Yes Yes reversed 18.0 79.0 18.0 6.0 12.1 start Yes Yes Yes Yes Yes type Yes Yes Yes Yes Yes

<optgroup> Yes Yes Yes Yes Yes disabled Yes 8.0 Yes Yes Yes label Yes Yes Yes Yes Yes

<option> Yes Yes Yes Yes Yes disabled Yes 8.0 Yes Yes Yes label Yes 8.0 No Yes Yes selected Yes Yes Yes Yes Yes value Yes Yes Yes Yes Yes

<output> 10.0 13.0 4.0 5.1 11.0 for 10.0 13.0 4.0 7.0 11.5 form No No No No No name 10.0 13.0 4.0 7.0 11.5

<p> Yes Yes Yes Yes Yes

<param> Yes Yes Yes Yes Yes name Yes Yes Yes Yes Yes value Yes Yes Yes Yes Yes

<picture> 38.0 13.0 38.0 9.1 25.0

<pre> Yes Yes Yes Yes Yes

<progress> 8.0 10.0 16.0 6.0 11.0 max 8.0 10.0 16.0 6.0 11.0 value 8.0 10.0 16.0 6.0 11.0

<q> Yes Yes Yes Yes Yes cite Yes Yes Yes Yes Yes

<rp> 5.0 5.5 38.0 5.0 15.0

<rt> 5.0 5.5 38.0 5.0 15.0

<ruby> 5.0 5.5 38.0 5.0 15.0

<s> Yes Yes Yes Yes Yes

<samp> Yes Yes Yes Yes Yes

<script> Yes Yes Yes Yes Yes async 8.0 10.0 3.6 5.1 15.0 crossorigin 30.0 18.0 13.0 13.0 12.1 defer 8.0 10.0 3.5 5.0 15.0 integrity 45.0 17.0 43.0 13.0 66.0 nomodule 61.0 16.0 60.0 11.0 48.0 referrerpolicy 70.0 79.0 65.0 No Yes src Yes Yes Yes Yes Yes type Yes Yes Yes Yes Yes

<section> 5.0 9.0 4.0 5.0 11.5

<select> Yes Yes Yes Yes Yes autofocus Yes 10.0 No Yes Yes disabled Yes 9.0 Yes Yes Yes form Yes Yes Yes Yes Yes multiple Yes Yes Yes Yes Yes name Yes Yes Yes Yes Yes required Yes 10.0 4.0 Yes Yes size Yes Yes Yes Yes Yes

<slot> 53.0 79.0 63.0 10.0 40.0

<small> Yes Yes Yes Yes Yes

<source> 4.0 9.0 3.5 4.0 10.5 media 38.0 9.0 15.0 9.1 25.0 sizes 38.0 13.0 3.8 9.1 25.0 src 4.0 9.0 3.5 4.0 10.5 srcset 38.0 13.0 38.0 9.1 25.0 type 4.0 9.0 3.5 4.0 10.5

<span> Yes Yes Yes Yes Yes

<strong> Yes Yes Yes Yes Yes

<style> Yes Yes Yes Yes Yes media Yes Yes Yes Yes Yes type Yes Yes Yes Yes Yes

<sub> Yes Yes Yes Yes Yes

<summary> 12.0 79.0 49.0 6.0 15.0

<sup> Yes Yes Yes Yes Yes

<svg> 4.0 9.0 3.0 3.2 10.1

<table> Yes Yes Yes Yes Yes

<tbody> Yes Yes Yes Yes Yes

<td> Yes Yes Yes Yes Yes colspan Yes Yes Yes Yes Yes headers Yes Yes Yes Yes Yes rowspan Yes Yes Yes Yes Yes

<template> 26.0 13.0 22.0 8.0 15.0

<textarea> Yes Yes Yes Yes Yes autocomplete No No 59.0 13.0 No autofocus Yes 10.0 4.0 Yes Yes cols Yes Yes Yes Yes Yes dirname Yes 79.0 No Yes Yes disabled Yes Yes Yes Yes Yes form Yes 11.0 Yes Yes Yes maxlength Yes 10.0 4.0 Yes Yes minlength Yes Yes Yes Yes Yes name Yes Yes Yes Yes Yes placeholder Yes 10.0 4.0 5.0 11.5 readonly Yes Yes Yes Yes Yes required Yes 10.0 4.0 Yes Yes rows Yes Yes Yes Yes Yes spellcheck Yes 11.0 Yes Yes Yes wrap Yes Yes Yes Yes Yes

<tfoot> Yes Yes Yes Yes Yes

<th> Yes Yes Yes Yes Yes abbr Yes Yes Yes Yes Yes colspan Yes Yes Yes Yes Yes headers Yes Yes Yes Yes Yes rowspan Yes Yes Yes Yes Yes scope Yes Yes Yes Yes Yes

<thead> Yes Yes Yes Yes Yes

<time> 62.0 18.0 22.0 7.0 49.0 datetime 62.0 18.0 22.0 7.0 49.0

<title> Yes Yes Yes Yes Yes

<tr> Yes Yes Yes Yes Yes

<track> 23.0 10.0 31.0 6.0 12.1 default 23.0 10.0 31.0 6.0 12.1 kind 23.0 10.0 31.0 6.0 12.1 label 23.0 10.0 31.0 6.0 12.1 src 23.0 10.0 31.0 6.0 12.1 srclang 23.0 10.0 31.0 6.0 12.1

<u> Yes Yes Yes Yes Yes

<ul> Yes Yes Yes Yes Yes

<var> Yes Yes Yes Yes Yes

<video> 4.0 9.0 3.5 3.1 11.5 autoplay 4.0 9.0 3.5 3.1 11.5 controls 4.0 9.0 3.5 3.1 11.5 height 4.0 9.0 3.5 3.1 11.5 loop 4.0 9.0 11.0 3.1 11.5 muted 30.0 10.0 11.0 5.0 Yes poster 4.0 9.0 3.6 3.1 10.5 preload 4.0 9.0 4.0 3.1 10.5 src 4.0 9.0 3.5 3.1 11.5 width 4.0 9.0 3.5 3.1 11.5

<wbr> Yes Yes Yes Yes Yes
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HTML Tags <!--> <!DOCTYPE> <a> <abbr> <acronym> <address> <applet> <area> <article> <aside> <audio> <b> <base> <basefont> <bdi> <bdo> <big> <blockquote> <body> <br> <button> <canvas> <caption> <center> <cite> <code> <col> <colgroup> <data> <datalist> <dd> <del> <details> <dfn> <dialog> <dir> <div> <dl> <dt> <em> <embed> <fieldset> <figcaption> <figure> <font> <footer> <form> <frame> <frameset> <h1> - <h6> <head> <header> <hr> <html> <i> <iframe> <img> <input> <ins> <kbd> <label> <legend> <li> <link> <main> <map> <mark> <meta> <meter> <nav> <noframes> <noscript> <object> <ol> <optgroup> <option> <output> <p> <param> <picture> <pre> <progress> <q> <rp> <rt> <ruby> <s> <samp> <script> <section> <select> <small> <source> <span> <strike> <strong> <style> <sub> <summary> <sup> <svg> <table> <tbody> <td> <template> <textarea> <tfoot> <th> <thead> <time> <title> <tr> <track> <tt> <u> <ul> <var> <video> <wbr>

HTML Attribute Reference HTML Attribute Reference The table below lists all HTML attributes and what elements they can be used within:

Attribute Belongs to Description accept <input> Specifies the types of files that the server accepts (only for type="file") accept-charset <form> Specifies the character encodings that are to be used for the form submission accesskey Global Attributes Specifies a shortcut key to activate/focus an element action <form> Specifies where to send the form-data when a form is submitted align Not supported in HTML 5. Specifies the alignment according to surrounding elements. Use CSS instead alt <area>, <img>, <input> Specifies an alternate text when the original element fails to display async <script> Specifies that the script is executed asynchronously (only for external scripts) autocomplete <form>, <input> Specifies whether the <form> or the <input> element should have autocomplete enabled autofocus <button>, <input>, <select>, <textarea> Specifies that the element should automatically get focus when the page loads autoplay <audio>, <video> Specifies that the audio/video will start playing as soon as it is ready bgcolor Not supported in HTML 5. Specifies the background color of an element. Use CSS instead border Not supported in HTML 5. Specifies the width of the border of an element. Use CSS instead charset <meta>, <script> Specifies the character encoding checked <input> Specifies that an <input> element should be pre-selected when the page loads (for type="checkbox" or type="radio") cite <blockquote>, <del>, <ins>, <q> Specifies a URL which explains the quote/deleted/inserted text class Global Attributes Specifies one or more classnames for an element (refers to a class in a style sheet) color Not supported in HTML 5. Specifies the text color of an element. Use CSS instead cols <textarea> Specifies the visible width of a text area colspan <td>, <th> Specifies the number of columns a table cell should span content <meta> Gives the value associated with the http-equiv or name attribute contenteditable Global Attributes Specifies whether the content of an element is editable or not controls <audio>, <video> Specifies that audio/video controls should be displayed (such as a play/pause button etc) coords <area> Specifies the coordinates of the area data <object> Specifies the URL of the resource to be used by the object data-* Global Attributes Used to store custom data private to the page or application datetime <del>, <ins>, <time> Specifies the date and time default <track> Specifies that the track is to be enabled if the user's preferences do not indicate that another track would be more appropriate defer <script> Specifies that the script is executed when the page has finished parsing (only for external scripts) dir Global Attributes Specifies the text direction for the content in an element dirname <input>, <textarea> Specifies that the text direction will be submitted disabled <button>, <fieldset>, <input>, <optgroup>, <option>, <select>, <textarea> Specifies that the specified element/group of elements should be disabled download <a>, <area> Specifies that the target will be downloaded when a user clicks on the hyperlink draggable Global Attributes Specifies whether an element is draggable or not enctype <form> Specifies how the form-data should be encoded when submitting it to the server (only for method="post") for <label>, <output> Specifies which form element(s) a label/calculation is bound to form <button>, <fieldset>, <input>, <label>, <meter>, <object>, <output>, <select>, <textarea> Specifies the name of the form the element belongs to formaction <button>, <input> Specifies where to send the form-data when a form is submitted. Only for type="submit" headers <td>, <th> Specifies one or more headers cells a cell is related to height <canvas>, <embed>, <iframe>, <img>, <input>, <object>, <video> Specifies the height of the element hidden Global Attributes Specifies that an element is not yet, or is no longer, relevant high <meter> Specifies the range that is considered to be a high value href <a>, <area>, <base>, <link> Specifies the URL of the page the link goes to hreflang <a>, <area>, <link> Specifies the language of the linked document http-equiv <meta> Provides an HTTP header for the information/value of the content attribute id Global Attributes Specifies a unique id for an element ismap <img> Specifies an image as a server-side image map kind <track> Specifies the kind of text track label <track>, <option>, <optgroup> Specifies the title of the text track lang Global Attributes Specifies the language of the element's content list <input> Refers to a <datalist> element that contains pre-defined options for an <input> element loop <audio>, <video> Specifies that the audio/video will start over again, every time it is finished low <meter> Specifies the range that is considered to be a low value max <input>, <meter>, <progress> Specifies the maximum value maxlength <input>, <textarea> Specifies the maximum number of characters allowed in an element media <a>, <area>, <link>, <source>, <style> Specifies what media/device the linked document is optimized for method <form> Specifies the HTTP method to use when sending form-data min <input>, <meter> Specifies a minimum value multiple <input>, <select> Specifies that a user can enter more than one value muted <video>, <audio> Specifies that the audio output of the video should be muted name <button>, <fieldset>, <form>, <iframe>, <input>, <map>, <meta>, <object>, <output>, <param>, <select>, <textarea> Specifies the name of the element novalidate <form> Specifies that the form should not be validated when submitted onabort <audio>, <embed>, <img>, <object>, <video> Script to be run on abort onafterprint <body> Script to be run after the document is printed onbeforeprint <body> Script to be run before the document is printed onbeforeunload <body> Script to be run when the document is about to be unloaded onblur All visible elements. Script to be run when the element loses focus oncanplay <audio>, <embed>, <object>, <video> Script to be run when a file is ready to start playing (when it has buffered enough to begin) oncanplaythrough <audio>, <video> Script to be run when a file can be played all the way to the end without pausing for buffering onchange All visible elements. Script to be run when the value of the element is changed onclick All visible elements. Script to be run when the element is being clicked oncontextmenu All visible elements. Script to be run when a context menu is triggered oncopy All visible elements. Script to be run when the content of the element is being copied oncuechange <track> Script to be run when the cue changes in a <track> element oncut All visible elements. Script to be run when the content of the element is being cut ondblclick All visible elements. Script to be run when the element is being double-clicked ondrag All visible elements. Script to be run when the element is being dragged ondragend All visible elements. Script to be run at the end of a drag operation ondragenter All visible elements. Script to be run when an element has been dragged to a valid drop target ondragleave All visible elements. Script to be run when an element leaves a valid drop target ondragover All visible elements. Script to be run when an element is being dragged over a valid drop target ondragstart All visible elements. Script to be run at the start of a drag operation ondrop All visible elements. Script to be run when dragged element is being dropped ondurationchange <audio>, <video> Script to be run when the length of the media changes onemptied <audio>, <video> Script to be run when something bad happens and the file is suddenly unavailable (like unexpectedly disconnects) onended <audio>, <video> Script to be run when the media has reach the end (a useful event for messages like "thanks for listening") onerror <audio>, <body>, <embed>, <img>, <object>, <script>, <style>, <video> Script to be run when an error occurs onfocus All visible elements. Script to be run when the element gets focus onhashchange <body> Script to be run when there has been changes to the anchor part of the a URL oninput All visible elements. Script to be run when the element gets user input oninvalid All visible elements. Script to be run when the element is invalid onkeydown All visible elements. Script to be run when a user is pressing a key onkeypress All visible elements. Script to be run when a user presses a key onkeyup All visible elements. Script to be run when a user releases a key onload <body>, <iframe>, <img>, <input>, <link>, <script>, <style> Script to be run when the element is finished loading onloadeddata <audio>, <video> Script to be run when media data is loaded onloadedmetadata <audio>, <video> Script to be run when meta data (like dimensions and duration) are loaded onloadstart <audio>, <video> Script to be run just as the file begins to load before anything is actually loaded onmousedown All visible elements. Script to be run when a mouse button is pressed down on an element onmousemove All visible elements. Script to be run as long as the mouse pointer is moving over an element onmouseout All visible elements. Script to be run when a mouse pointer moves out of an element onmouseover All visible elements. Script to be run when a mouse pointer moves over an element onmouseup All visible elements. Script to be run when a mouse button is released over an element onmousewheel All visible elements. Script to be run when a mouse wheel is being scrolled over an element onoffline <body> Script to be run when the browser starts to work offline ononline <body> Script to be run when the browser starts to work online onpagehide <body> Script to be run when a user navigates away from a page onpageshow <body> Script to be run when a user navigates to a page onpaste All visible elements. Script to be run when the user pastes some content in an element onpause <audio>, <video> Script to be run when the media is paused either by the user or programmatically onplay <audio>, <video> Script to be run when the media has started playing onplaying <audio>, <video> Script to be run when the media has started playing onpopstate <body> Script to be run when the window's history changes. onprogress <audio>, <video> Script to be run when the browser is in the process of getting the media data onratechange <audio>, <video> Script to be run each time the playback rate changes (like when a user switches to a slow motion or fast forward mode). onreset <form> Script to be run when a reset button in a form is clicked. onresize <body> Script to be run when the browser window is being resized. onscroll All visible elements. Script to be run when an element's scrollbar is being scrolled onsearch <input> Script to be run when the user writes something in a search field (for <input="search">) onseeked <audio>, <video> Script to be run when the seeking attribute is set to false indicating that seeking has ended onseeking <audio>, <video> Script to be run when the seeking attribute is set to true indicating that seeking is active onselect All visible elements. Script to be run when the element gets selected onstalled <audio>, <video> Script to be run when the browser is unable to fetch the media data for whatever reason onstorage <body> Script to be run when a Web Storage area is updated onsubmit <form> Script to be run when a form is submitted onsuspend <audio>, <video> Script to be run when fetching the media data is stopped before it is completely loaded for whatever reason ontimeupdate <audio>, <video> Script to be run when the playing position has changed (like when the user fast forwards to a different point in the media) ontoggle <details> Script to be run when the user opens or closes the <details> element onunload <body> Script to be run when a page has unloaded (or the browser window has been closed) onvolumechange <audio>, <video> Script to be run each time the volume of a video/audio has been changed onwaiting <audio>, <video> Script to be run when the media has paused but is expected to resume (like when the media pauses to buffer more data) onwheel All visible elements. Script to be run when the mouse wheel rolls up or down over an element open <details> Specifies that the details should be visible (open) to the user optimum <meter> Specifies what value is the optimal value for the gauge pattern <input> Specifies a regular expression that an <input> element's value is checked against placeholder <input>, <textarea> Specifies a short hint that describes the expected value of the element poster <video> Specifies an image to be shown while the video is downloading, or until the user hits the play button preload <audio>, <video> Specifies if and how the author thinks the audio/video should be loaded when the page loads readonly <input>, <textarea> Specifies that the element is read-only rel <a>, <area>, <form>, <link> Specifies the relationship between the current document and the linked document required <input>, <select>, <textarea> Specifies that the element must be filled out before submitting the form reversed <ol> Specifies that the list order should be descending (9,8,7…) rows <textarea> Specifies the visible number of lines in a text area rowspan <td>, <th> Specifies the number of rows a table cell should span sandbox <iframe> Enables an extra set of restrictions for the content in an <iframe> scope <th> Specifies whether a header cell is a header for a column, row, or group of columns or rows selected <option> Specifies that an option should be pre-selected when the page loads shape <area> Specifies the shape of the area size <input>, <select> Specifies the width, in characters (for <input>) or specifies the number of visible options (for <select>) sizes <img>, <link>, <source> Specifies the size of the linked resource span <col>, <colgroup> Specifies the number of columns to span spellcheck Global Attributes Specifies whether the element is to have its spelling and grammar checked or not src <audio>, <embed>, <iframe>, <img>, <input>, <script>, <source>, <track>, <video> Specifies the URL of the media file srcdoc <iframe> Specifies the HTML content of the page to show in the <iframe> srclang <track> Specifies the language of the track text data (required if kind="subtitles") srcset <img>, <source> Specifies the URL of the image to use in different situations start <ol> Specifies the start value of an ordered list step <input> Specifies the legal number intervals for an input field style Global Attributes Specifies an inline CSS style for an element tabindex Global Attributes Specifies the tabbing order of an element target <a>, <area>, <base>, <form> Specifies the target for where to open the linked document or where to submit the form title Global Attributes Specifies extra information about an element translate Global Attributes Specifies whether the content of an element should be translated or not type <a>, <button>, <embed>, <input>, <link>, <menu>, <object>, <script>, <source>, <style> Specifies the type of element usemap <img>, <object> Specifies an image as a client-side image map value <button>, <input>, <li>, <option>, <meter>, <progress>, <param> Specifies the value of the element width <canvas>, <embed>, <iframe>, <img>, <input>, <object>, <video> Specifies the width of the element wrap <textarea> Specifies how the text in a text area is to be wrapped when submitted in a form
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HTML Tags <!--> <!DOCTYPE> <a> <abbr> <acronym> <address> <applet> <area> <article> <aside> <audio> <b> <base> <basefont> <bdi> <bdo> <big> <blockquote> <body> <br> <button> <canvas> <caption> <center> <cite> <code> <col> <colgroup> <data> <datalist> <dd> <del> <details> <dfn> <dialog> <dir> <div> <dl> <dt> <em> <embed> <fieldset> <figcaption> <figure> <font> <footer> <form> <frame> <frameset> <h1> - <h6> <head> <header> <hr> <html> <i> <iframe> <img> <input> <ins> <kbd> <label> <legend> <li> <link> <main> <map> <mark> <meta> <meter> <nav> <noframes> <noscript> <object> <ol> <optgroup> <option> <output> <p> <param> <picture> <pre> <progress> <q> <rp> <rt> <ruby> <s> <samp> <script> <section> <select> <small> <source> <span> <strike> <strong> <style> <sub> <summary> <sup> <svg> <table> <tbody> <td> <template> <textarea> <tfoot> <th> <thead> <time> <title> <tr> <track> <tt> <u> <ul> <var> <video> <wbr>

HTML Global Attributes HTML Global Attributes The global attributes are attributes that can be used with all HTML elements.

Attribute Description accesskey Specifies a shortcut key to activate/focus an element class Specifies one or more classnames for an element (refers to a class in a style sheet) contenteditable Specifies whether the content of an element is editable or not data-* Used to store custom data private to the page or application dir Specifies the text direction for the content in an element draggable Specifies whether an element is draggable or not hidden Specifies that an element is not yet, or is no longer, relevant id Specifies a unique id for an element lang Specifies the language of the element's content spellcheck Specifies whether the element is to have its spelling and grammar checked or not style Specifies an inline CSS style for an element tabindex Specifies the tabbing order of an element title Specifies extra information about an element translate Specifies whether the content of an element should be translated or not
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HTML Tags <!--> <!DOCTYPE> <a> <abbr> <acronym> <address> <applet> <area> <article> <aside> <audio> <b> <base> <basefont> <bdi> <bdo> <big> <blockquote> <body> <br> <button> <canvas> <caption> <center> <cite> <code> <col> <colgroup> <data> <datalist> <dd> <del> <details> <dfn> <dialog> <dir> <div> <dl> <dt> <em> <embed> <fieldset> <figcaption> <figure> <font> <footer> <form> <frame> <frameset> <h1> - <h6> <head> <header> <hr> <html> <i> <iframe> <img> <input> <ins> <kbd> <label> <legend> <li> <link> <main> <map> <mark> <meta> <meter> <nav> <noframes> <noscript> <object> <ol> <optgroup> <option> <output> <p> <param> <picture> <pre> <progress> <q> <rp> <rt> <ruby> <s> <samp> <script> <section> <select> <small> <source> <span> <strike> <strong> <style> <sub> <summary> <sup> <svg> <table> <tbody> <td> <template> <textarea> <tfoot> <th> <thead> <time> <title> <tr> <track> <tt> <u> <ul> <var> <video> <wbr>

HTML Event Attributes Global Event Attributes HTML has the ability to let events trigger actions in a browser, like starting a JavaScript when a user clicks on an element.

To learn more about programming events, please visit our JavaScript tutorial.

Below are the global event attributes that can be added to HTML elements to define event actions.

Window Event Attributes Events triggered for the window object (applies to the <body> tag):

Attribute Value Description onafterprint script Script to be run after the document is printed onbeforeprint script Script to be run before the document is printed onbeforeunload script Script to be run when the document is about to be unloaded onerror script Script to be run when an error occurs onhashchange script Script to be run when there has been changes to the anchor part of the a URL onload script Fires after the page is finished loading onmessage script Script to be run when the message is triggered onoffline script Script to be run when the browser starts to work offline ononline script Script to be run when the browser starts to work online onpagehide script Script to be run when a user navigates away from a page onpageshow script Script to be run when a user navigates to a page onpopstate script Script to be run when the window's history changes onresize script Fires when the browser window is resized onstorage script Script to be run when a Web Storage area is updated onunload script Fires once a page has unloaded (or the browser window has been closed)

Form Events Events triggered by actions inside a HTML form (applies to almost all HTML elements, but is most used in form elements):

Attribute Value Description onblur script Fires the moment that the element loses focus onchange script Fires the moment when the value of the element is changed oncontextmenu script Script to be run when a context menu is triggered onfocus script Fires the moment when the element gets focus oninput script Script to be run when an element gets user input oninvalid script Script to be run when an element is invalid onreset script Fires when the Reset button in a form is clicked onsearch script Fires when the user writes something in a search field (for <input="search">) onselect script Fires after some text has been selected in an element onsubmit script Fires when a form is submitted Keyboard Events Attribute Value Description onkeydown script Fires when a user is pressing a key onkeypress script Fires when a user presses a key onkeyup script Fires when a user releases a key Mouse Events Attribute Value Description onclick script Fires on a mouse click on the element ondblclick script Fires on a mouse double-click on the element onmousedown script Fires when a mouse button is pressed down on an element onmousemove script Fires when the mouse pointer is moving while it is over an element onmouseout script Fires when the mouse pointer moves out of an element onmouseover script Fires when the mouse pointer moves over an element onmouseup script Fires when a mouse button is released over an element onmousewheel script Deprecated. Use the onwheel attribute instead onwheel script Fires when the mouse wheel rolls up or down over an element Drag Events Attribute Value Description ondrag script Script to be run when an element is dragged ondragend script Script to be run at the end of a drag operation ondragenter script Script to be run when an element has been dragged to a valid drop target ondragleave script Script to be run when an element leaves a valid drop target ondragover script Script to be run when an element is being dragged over a valid drop target ondragstart script Script to be run at the start of a drag operation ondrop script Script to be run when dragged element is being dropped onscroll script Script to be run when an element's scrollbar is being scrolled Clipboard Events Attribute Value Description oncopy script Fires when the user copies the content of an element oncut script Fires when the user cuts the content of an element onpaste script Fires when the user pastes some content in an element Media Events Events triggered by medias like videos, images and audio (applies to all HTML elements, but is most common in media elements, like <audio>, <embed>, <img>, <object>, and <video>).

Tip: Look at our HTML Audio and Video DOM Reference for more information.

Attribute Value Description onabort script Script to be run on abort oncanplay script Script to be run when a file is ready to start playing (when it has buffered enough to begin) oncanplaythrough script Script to be run when a file can be played all the way to the end without pausing for buffering oncuechange script Script to be run when the cue changes in a <track> element ondurationchange script Script to be run when the length of the media changes onemptied script Script to be run when something bad happens and the file is suddenly unavailable (like unexpectedly disconnects) onended script Script to be run when the media has reach the end (a useful event for messages like "thanks for listening") onerror script Script to be run when an error occurs when the file is being loaded onloadeddata script Script to be run when media data is loaded onloadedmetadata script Script to be run when meta data (like dimensions and duration) are loaded onloadstart script Script to be run just as the file begins to load before anything is actually loaded onpause script Script to be run when the media is paused either by the user or programmatically onplay script Script to be run when the media is ready to start playing onplaying script Script to be run when the media actually has started playing onprogress script Script to be run when the browser is in the process of getting the media data onratechange script Script to be run each time the playback rate changes (like when a user switches to a slow motion or fast forward mode) onseeked script Script to be run when the seeking attribute is set to false indicating that seeking has ended onseeking script Script to be run when the seeking attribute is set to true indicating that seeking is active onstalled script Script to be run when the browser is unable to fetch the media data for whatever reason onsuspend script Script to be run when fetching the media data is stopped before it is completely loaded for whatever reason ontimeupdate script Script to be run when the playing position has changed (like when the user fast forwards to a different point in the media) onvolumechange script Script to be run each time the volume is changed which (includes setting the volume to "mute") onwaiting script Script to be run when the media has paused but is expected to resume (like when the media pauses to buffer more data) Misc Events Attribute Value Description ontoggle script Fires when the user opens or closes the <details> element
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HTML Tags <!--> <!DOCTYPE> <a> <abbr> <acronym> <address> <applet> <area> <article> <aside> <audio> <b> <base> <basefont> <bdi> <bdo> <big> <blockquote> <body> <br> <button> <canvas> <caption> <center> <cite> <code> <col> <colgroup> <data> <datalist> <dd> <del> <details> <dfn> <dialog> <dir> <div> <dl> <dt> <em> <embed> <fieldset> <figcaption> <figure> <font> <footer> <form> <frame> <frameset> <h1> - <h6> <head> <header> <hr> <html> <i> <iframe> <img> <input> <ins> <kbd> <label> <legend> <li> <link> <main> <map> <mark> <meta> <meter> <nav> <noframes> <noscript> <object> <ol> <optgroup> <option> <output> <p> <param> <picture> <pre> <progress> <q> <rp> <rt> <ruby> <s> <samp> <script> <section> <select> <small> <source> <span> <strike> <strong> <style> <sub> <summary> <sup> <svg> <table> <tbody> <td> <template> <textarea> <tfoot> <th> <thead> <time> <title> <tr> <track> <tt> <u> <ul> <var> <video> <wbr>

HTML Color Names Color Names Supported by All Browsers All modern browsers support the following 140 color names (click on a color name, or a hex value, to view the color as the background-color along with different text colors):

For a full overview of HTML colors, visit our colors tutorial.

AliceBlue

F0F8FF
AntiqueWhite

FAEBD7
Aqua

00FFFF
Aquamarine

7FFFD4
Azure

F0FFFF
Beige

F5F5DC
Bisque

FFE4C4
Black

000000
BlanchedAlmond

FFEBCD
Blue

0000FF
BlueViolet

8A2BE2
Brown

A52A2A
BurlyWood

DEB887
CadetBlue

5F9EA0
Chartreuse

7FFF00
Chocolate

D2691E
Coral

FF7F50
CornflowerBlue

6495ED
Cornsilk

FFF8DC
Crimson

DC143C
Cyan

00FFFF
DarkBlue

00008B
DarkCyan

008B8B
DarkGoldenRod

B8860B
DarkGray

A9A9A9
DarkGrey

A9A9A9
DarkGreen

006400
DarkKhaki

BDB76B
DarkMagenta

8B008B
DarkOliveGreen

556B2F
DarkOrange

FF8C00
DarkOrchid

9932CC
DarkRed

8B0000
DarkSalmon

E9967A
DarkSeaGreen

8FBC8F
DarkSlateBlue

483D8B
DarkSlateGray

2F4F4F
DarkSlateGrey

2F4F4F
DarkTurquoise

00CED1
DarkViolet

9400D3
DeepPink

FF1493
DeepSkyBlue

00BFFF
DimGray

696969
DimGrey

696969
DodgerBlue

1E90FF
FireBrick

B22222
FloralWhite

FFFAF0
ForestGreen

228B22
Fuchsia

FF00FF
Gainsboro

DCDCDC
GhostWhite

F8F8FF
Gold

FFD700
GoldenRod

DAA520
Gray

808080
Grey

808080
Green

008000
GreenYellow

ADFF2F
HoneyDew

F0FFF0
HotPink

FF69B4
IndianRed

CD5C5C
Indigo

4B0082
Ivory

FFFFF0
Khaki

F0E68C
Lavender

E6E6FA
LavenderBlush

FFF0F5
LawnGreen

7CFC00
LemonChiffon

FFFACD
LightBlue

ADD8E6
LightCoral

F08080
LightCyan

E0FFFF
LightGoldenRodYellow

FAFAD2
LightGray

D3D3D3
LightGrey

D3D3D3
LightGreen

90EE90
LightPink

FFB6C1
LightSalmon

FFA07A
LightSeaGreen

20B2AA
LightSkyBlue

87CEFA
LightSlateGray

778899
LightSlateGrey

778899
LightSteelBlue

B0C4DE
LightYellow

FFFFE0
Lime

00FF00
LimeGreen

32CD32
Linen

FAF0E6
Magenta

FF00FF
Maroon

800000
MediumAquaMarine

66CDAA
MediumBlue

0000CD
MediumOrchid

BA55D3
MediumPurple

9370DB
MediumSeaGreen

3CB371
MediumSlateBlue

7B68EE
MediumSpringGreen

00FA9A
MediumTurquoise

48D1CC
MediumVioletRed

C71585
MidnightBlue

191970
MintCream

F5FFFA
MistyRose

FFE4E1
Moccasin

FFE4B5
NavajoWhite

FFDEAD
Navy

000080
OldLace

FDF5E6
Olive

808000
OliveDrab

6B8E23
Orange

FFA500
OrangeRed

FF4500
Orchid

DA70D6
PaleGoldenRod

EEE8AA
PaleGreen

98FB98
PaleTurquoise

AFEEEE
PaleVioletRed

DB7093
PapayaWhip

FFEFD5
PeachPuff

FFDAB9
Peru

CD853F
Pink

FFC0CB
Plum

DDA0DD
PowderBlue

B0E0E6
Purple

800080
RebeccaPurple

663399
Red

FF0000
RosyBrown

BC8F8F
RoyalBlue

4169E1
SaddleBrown

8B4513
Salmon

FA8072
SandyBrown

F4A460
SeaGreen

2E8B57
SeaShell

FFF5EE
Sienna

A0522D
Silver

C0C0C0
SkyBlue

87CEEB
SlateBlue

6A5ACD
SlateGray

708090
SlateGrey

708090
Snow

FFFAFA
SpringGreen

00FF7F
SteelBlue

4682B4
Tan

D2B48C
Teal

008080
Thistle

D8BFD8
Tomato

FF6347
Turquoise

40E0D0
Violet

EE82EE
Wheat

F5DEB3
White

FFFFFF
WhiteSmoke

F5F5F5
Yellow

FFFF00
YellowGreen

9ACD32
COLOR PICKER 
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HTML Tags <!--> <!DOCTYPE> <a> <abbr> <acronym> <address> <applet> <area> <article> <aside> <audio> <b> <base> <basefont> <bdi> <bdo> <big> <blockquote> <body> <br> <button> <canvas> <caption> <center> <cite> <code> <col> <colgroup> <data> <datalist> <dd> <del> <details> <dfn> <dialog> <dir> <div> <dl> <dt> <em> <embed> <fieldset> <figcaption> <figure> <font> <footer> <form> <frame> <frameset> <h1> - <h6> <head> <header> <hr> <html> <i> <iframe> <img> <input> <ins> <kbd> <label> <legend> <li> <link> <main> <map> <mark> <meta> <meter> <nav> <noframes> <noscript> <object> <ol> <optgroup> <option> <output> <p> <param> <picture> <pre> <progress> <q> <rp> <rt> <ruby> <s> <samp> <script> <section> <select> <small> <source> <span> <strike> <strong> <style> <sub> <summary> <sup> <svg> <table> <tbody> <td> <template> <textarea> <tfoot> <th> <thead> <time> <title> <tr> <track> <tt> <u> <ul> <var> <video> <wbr>

HTML Canvas Reference HTML Canvas Reference The HTML <canvas> tag is used to draw graphics, on the fly, via scripting (usually JavaScript).

To learn more about <canvas>, please read our HTML Canvas tutorial.

Colors, Styles, and Shadows Property Description fillStyle Sets or returns the color, gradient, or pattern used to fill the drawing strokeStyle Sets or returns the color, gradient, or pattern used for strokes shadowColor Sets or returns the color to use for shadows shadowBlur Sets or returns the blur level for shadows shadowOffsetX Sets or returns the horizontal distance of the shadow from the shape shadowOffsetY Sets or returns the vertical distance of the shadow from the shape Method Description createLinearGradient() Creates a linear gradient (to use on canvas content) createPattern() Repeats a specified element in the specified direction createRadialGradient() Creates a radial/circular gradient (to use on canvas content) addColorStop() Specifies the colors and stop positions in a gradient object Line Styles Property Description lineCap Sets or returns the style of the end caps for a line lineJoin Sets or returns the type of corner created, when two lines meet lineWidth Sets or returns the current line width miterLimit Sets or returns the maximum miter length

Rectangles Method Description rect() Creates a rectangle fillRect() Draws a "filled" rectangle strokeRect() Draws a rectangle (no fill) clearRect() Clears the specified pixels within a given rectangle Paths Method Description fill() Fills the current drawing (path) stroke() Actually draws the path you have defined beginPath() Begins a path, or resets the current path moveTo() Moves the path to the specified point in the canvas, without creating a line closePath() Creates a path from the current point back to the starting point lineTo() Adds a new point and creates a line to that point from the last specified point in the canvas clip() Clips a region of any shape and size from the original canvas quadraticCurveTo() Creates a quadratic Bézier curve bezierCurveTo() Creates a cubic Bézier curve arc() Creates an arc/curve (used to create circles, or parts of circles) arcTo() Creates an arc/curve between two tangents isPointInPath() Returns true if the specified point is in the current path, otherwise false Transformations Method Description scale() Scales the current drawing bigger or smaller rotate() Rotates the current drawing translate() Remaps the (0,0) position on the canvas transform() Replaces the current transformation matrix for the drawing setTransform() Resets the current transform to the identity matrix. Then runs transform() Text Property Description font Sets or returns the current font properties for text content textAlign Sets or returns the current alignment for text content textBaseline Sets or returns the current text baseline used when drawing text Method Description fillText() Draws "filled" text on the canvas strokeText() Draws text on the canvas (no fill) measureText() Returns an object that contains the width of the specified text Image Drawing Method Description drawImage() Draws an image, canvas, or video onto the canvas Pixel Manipulation Property Description width Returns the width of an ImageData object height Returns the height of an ImageData object data Returns an object that contains image data of a specified ImageData object Method Description createImageData() Creates a new, blank ImageData object getImageData() Returns an ImageData object that copies the pixel data for the specified rectangle on a canvas putImageData() Puts the image data (from a specified ImageData object) back onto the canvas Compositing Property Description globalAlpha Sets or returns the current alpha or transparency value of the drawing globalCompositeOperation Sets or returns how a new image is drawn onto an existing image Other Method Description save() Saves the state of the current context restore() Returns previously saved path state and attributes createEvent()
getContext()
toDataURL()
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HTML Tags <!--> <!DOCTYPE> <a> <abbr> <acronym> <address> <applet> <area> <article> <aside> <audio> <b> <base> <basefont> <bdi> <bdo> <big> <blockquote> <body> <br> <button> <canvas> <caption> <center> <cite> <code> <col> <colgroup> <data> <datalist> <dd> <del> <details> <dfn> <dialog> <dir> <div> <dl> <dt> <em> <embed> <fieldset> <figcaption> <figure> <font> <footer> <form> <frame> <frameset> <h1> - <h6> <head> <header> <hr> <html> <i> <iframe> <img> <input> <ins> <kbd> <label> <legend> <li> <link> <main> <map> <mark> <meta> <meter> <nav> <noframes> <noscript> <object> <ol> <optgroup> <option> <output> <p> <param> <picture> <pre> <progress> <q> <rp> <rt> <ruby> <s> <samp> <script> <section> <select> <small> <source> <span> <strike> <strong> <style> <sub> <summary> <sup> <svg> <table> <tbody> <td> <template> <textarea> <tfoot> <th> <thead> <time> <title> <tr> <track> <tt> <u> <ul> <var> <video> <wbr>

HTML Audio/Video DOM Reference HTML Audio and Video DOM Reference The HTML5 DOM has methods, properties, and events for the <audio> and <video> elements.

HTML Audio/Video Methods Method Description addTextTrack() Adds a new text track to the audio/video canPlayType() Checks if the browser can play the specified audio/video type load() Re-loads the audio/video element play() Starts playing the audio/video pause() Pauses the currently playing audio/video HTML Audio/Video Properties Property Description audioTracks Returns an AudioTrackList object representing available audio tracks autoplay Sets or returns whether the audio/video should start playing as soon as it is loaded buffered Returns a TimeRanges object representing the buffered parts of the audio/video controller Returns the MediaController object representing the current media controller of the audio/video controls Sets or returns whether the audio/video should display controls (like play/pause etc.) crossOrigin Sets or returns the CORS settings of the audio/video currentSrc Returns the URL of the current audio/video currentTime Sets or returns the current playback position in the audio/video (in seconds) defaultMuted Sets or returns whether the audio/video should be muted by default defaultPlaybackRate Sets or returns the default speed of the audio/video playback duration Returns the length of the current audio/video (in seconds) ended Returns whether the playback of the audio/video has ended or not error Returns a MediaError object representing the error state of the audio/video loop Sets or returns whether the audio/video should start over again when finished mediaGroup Sets or returns the group the audio/video belongs to (used to link multiple audio/video elements) muted Sets or returns whether the audio/video is muted or not networkState Returns the current network state of the audio/video paused Returns whether the audio/video is paused or not playbackRate Sets or returns the speed of the audio/video playback played Returns a TimeRanges object representing the played parts of the audio/video preload Sets or returns whether the audio/video should be loaded when the page loads readyState Returns the current ready state of the audio/video seekable Returns a TimeRanges object representing the seekable parts of the audio/video seeking Returns whether the user is currently seeking in the audio/video src Sets or returns the current source of the audio/video element startDate Returns a Date object representing the current time offset textTracks Returns a TextTrackList object representing the available text tracks videoTracks Returns a VideoTrackList object representing the available video tracks volume Sets or returns the volume of the audio/video

HTML Audio/Video Events Event Description abort Fires when the loading of an audio/video is aborted canplay Fires when the browser can start playing the audio/video canplaythrough Fires when the browser can play through the audio/video without stopping for buffering durationchange Fires when the duration of the audio/video is changed emptied Fires when the current playlist is empty ended Fires when the current playlist is ended error Fires when an error occurred during the loading of an audio/video loadeddata Fires when the browser has loaded the current frame of the audio/video loadedmetadata Fires when the browser has loaded meta data for the audio/video loadstart Fires when the browser starts looking for the audio/video pause Fires when the audio/video has been paused play Fires when the audio/video has been started or is no longer paused playing Fires when the audio/video is playing after having been paused or stopped for buffering progress Fires when the browser is downloading the audio/video ratechange Fires when the playing speed of the audio/video is changed seeked Fires when the user is finished moving/skipping to a new position in the audio/video seeking Fires when the user starts moving/skipping to a new position in the audio/video stalled Fires when the browser is trying to get media data, but data is not available suspend Fires when the browser is intentionally not getting media data timeupdate Fires when the current playback position has changed volumechange Fires when the volume has been changed waiting Fires when the video stops because it needs to buffer the next frame
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HTML Character Sets Common HTML Character Sets The default character set in HTML5 is UTF-8.

For a closer look, visit our Complete HTML Character Set Reference.

Number ASCII ANSI 8859-1 UTF-8 Description 32 space 33 ! ! ! ! exclamation mark 34 " " " " quotation mark 35 # # # # number sign 36 $ $ $ $ dollar sign 37 % % % % percent sign 38 & & & & ampersand 39 ' ' ' ' apostrophe 40 ( ( ( ( left parenthesis 41 ) ) ) ) right parenthesis 42 * * * * asterisk 43 + + + + plus sign 44 , , , , comma 45 - - - - hyphen-minus 46 . . . . full stop 47 / / / / solidus 48 0 0 0 0 digit zero 49 1 1 1 1 digit one 50 2 2 2 2 digit two 51 3 3 3 3 digit three 52 4 4 4 4 digit four 53 5 5 5 5 digit five 54 6 6 6 6 digit six 55 7 7 7 7 digit seven 56 8 8 8 8 digit eight 57 9 9 9 9 digit nine 58 : : : : colon 59 ; ; ; ; semicolon 60 < < < < less-than sign 61 = = = = equals sign 62 > > > > greater-than sign 63 ? ? ? ? question mark 64 @ @ @ @ commercial at 65 A A A A Latin capital letter A 66 B B B B Latin capital letter B 67 C C C C Latin capital letter C 68 D D D D Latin capital letter D 69 E E E E Latin capital letter E 70 F F F F Latin capital letter F 71 G G G G Latin capital letter G 72 H H H H Latin capital letter H 73 I I I I Latin capital letter I 74 J J J J Latin capital letter J 75 K K K K Latin capital letter K 76 L L L L Latin capital letter L 77 M M M M Latin capital letter M 78 N N N N Latin capital letter N 79 O O O O Latin capital letter O 80 P P P P Latin capital letter P 81 Q Q Q Q Latin capital letter Q 82 R R R R Latin capital letter R 83 S S S S Latin capital letter S 84 T T T T Latin capital letter T 85 U U U U Latin capital letter U 86 V V V V Latin capital letter V 87 W W W W Latin capital letter W 88 X X X X Latin capital letter X 89 Y Y Y Y Latin capital letter Y 90 Z Z Z Z Latin capital letter Z 91 [ [ [ [ left square bracket 92 \ \ \ \ reverse solidus 93 ] ] ] ] right square bracket 94 ^ ^ ^ ^ circumflex accent 95 _ _ _ _ low line 96 grave accent 97 a a a a Latin small letter a 98 b b b b Latin small letter b 99 c c c c Latin small letter c 100 d d d d Latin small letter d 101 e e e e Latin small letter e 102 f f f f Latin small letter f 103 g g g g Latin small letter g 104 h h h h Latin small letter h 105 i i i i Latin small letter i 106 j j j j Latin small letter j 107 k k k k Latin small letter k 108 l l l l Latin small letter l 109 m m m m Latin small letter m 110 n n n n Latin small letter n 111 o o o o Latin small letter o 112 p p p p Latin small letter p 113 q q q q Latin small letter q 114 r r r r Latin small letter r 115 s s s s Latin small letter s 116 t t t t Latin small letter t 117 u u u u Latin small letter u 118 v v v v Latin small letter v 119 w w w w Latin small letter w 120 x x x x Latin small letter x 121 y y y y Latin small letter y 122 z z z z Latin small letter z 123 { { { { left curly bracket 124 | | | | vertical line 125 } } } } right curly bracket 126 ~ ~ ~ ~ tilde 127 DEL
128 € euro sign 129    NOT USED 130 ‚ single low-9 quotation mark 131 ƒ Latin small letter f with hook 132 „ double low-9 quotation mark 133 … horizontal ellipsis 134 † dagger 135 ‡ double dagger 136 ˆ modifier letter circumflex accent 137 ‰ per mille sign 138 Š Latin capital letter S with caron 139 ‹ single left-pointing angle quotation mark 140 Œ Latin capital ligature OE 141    NOT USED 142 Ž Latin capital letter Z with caron 143    NOT USED 144    NOT USED 145 ‘ left single quotation mark 146 ’ right single quotation mark 147 “ left double quotation mark 148 ” right double quotation mark 149 • bullet 150 – en dash 151 — em dash 152 ˜ small tilde 153 ™ trade mark sign 154 š Latin small letter s with caron 155 › single right-pointing angle quotation mark 156 œ Latin small ligature oe 157    NOT USED 158 ž Latin small letter z with caron 159 Ÿ Latin capital letter Y with diaeresis 160 no-break space 161 ¡ ¡ ¡ inverted exclamation mark 162 ¢ ¢ ¢ cent sign 163 £ £ £ pound sign 164 ¤ ¤ ¤ currency sign 165 ¥ ¥ ¥ yen sign 166 ¦ ¦ ¦ broken bar 167 § § § section sign 168 ¨ ¨ ¨ diaeresis 169 © © © copyright sign 170 ª ª ª feminine ordinal indicator 171 « « « left-pointing double angle quotation mark 172 ¬ ¬ ¬ not sign 173 ­ ­ ­ soft hyphen 174 ® ® ® registered sign 175 ¯ ¯ ¯ macron 176 ° ° ° degree sign 177 ± ± ± plus-minus sign 178 ² ² ² superscript two 179 ³ ³ ³ superscript three 180 ´ ´ ´ acute accent 181 µ µ µ micro sign 182 ¶ ¶ ¶ pilcrow sign 183 · · · middle dot 184 ¸ ¸ ¸ cedilla 185 ¹ ¹ ¹ superscript one 186 º º º masculine ordinal indicator 187 » » » right-pointing double angle quotation mark 188 ¼ ¼ ¼ vulgar fraction one quarter 189 ½ ½ ½ vulgar fraction one half 190 ¾ ¾ ¾ vulgar fraction three quarters 191 ¿ ¿ ¿ inverted question mark 192 À À À Latin capital letter A with grave 193 Á Á Á Latin capital letter A with acute 194 Â Â Â Latin capital letter A with circumflex 195 Ã Ã Ã Latin capital letter A with tilde 196 Ä Ä Ä Latin capital letter A with diaeresis 197 Å Å Å Latin capital letter A with ring above 198 Æ Æ Æ Latin capital letter AE 199 Ç Ç Ç Latin capital letter C with cedilla 200 È È È Latin capital letter E with grave 201 É É É Latin capital letter E with acute 202 Ê Ê Ê Latin capital letter E with circumflex 203 Ë Ë Ë Latin capital letter E with diaeresis 204 Ì Ì Ì Latin capital letter I with grave 205 Í Í Í Latin capital letter I with acute 206 Î Î Î Latin capital letter I with circumflex 207 Ï Ï Ï Latin capital letter I with diaeresis 208 Ð Ð Ð Latin capital letter Eth 209 Ñ Ñ Ñ Latin capital letter N with tilde 210 Ò Ò Ò Latin capital letter O with grave 211 Ó Ó Ó Latin capital letter O with acute 212 Ô Ô Ô Latin capital letter O with circumflex 213 Õ Õ Õ Latin capital letter O with tilde 214 Ö Ö Ö Latin capital letter O with diaeresis 215 × × × multiplication sign 216 Ø Ø Ø Latin capital letter O with stroke 217 Ù Ù Ù Latin capital letter U with grave 218 Ú Ú Ú Latin capital letter U with acute 219 Û Û Û Latin capital letter U with circumflex 220 Ü Ü Ü Latin capital letter U with diaeresis 221 Ý Ý Ý Latin capital letter Y with acute 222 Þ Þ Þ Latin capital letter Thorn 223 ß ß ß Latin small letter sharp s 224 à à à Latin small letter a with grave 225 á á á Latin small letter a with acute 226 â â â Latin small letter a with circumflex 227 ã ã ã Latin small letter a with tilde 228 ä ä ä Latin small letter a with diaeresis 229 å å å Latin small letter a with ring above 230 æ æ æ Latin small letter ae 231 ç ç ç Latin small letter c with cedilla 232 è è è Latin small letter e with grave 233 é é é Latin small letter e with acute 234 ê ê ê Latin small letter e with circumflex 235 ë ë ë Latin small letter e with diaeresis 236 ì ì ì Latin small letter i with grave 237 í í í Latin small letter i with acute 238 î î î Latin small letter i with circumflex 239 ï ï ï Latin small letter i with diaeresis 240 ð ð ð Latin small letter eth 241 ñ ñ ñ Latin small letter n with tilde 242 ò ò ò Latin small letter o with grave 243 ó ó ó Latin small letter o with acute 244 ô ô ô Latin small letter o with circumflex 245 õ õ õ Latin small letter o with tilde 246 ö ö ö Latin small letter o with diaeresis 247 ÷ ÷ ÷ division sign 248 ø ø ø Latin small letter o with stroke 249 ù ù ù Latin small letter u with grave 250 ú ú ú Latin small letter u with acute 251 û û û Latin small letter with circumflex 252 ü ü ü Latin small letter u with diaeresis 253 ý ý ý Latin small letter y with acute 254 þ þ þ Latin small letter thorn 255 ÿ ÿ ÿ Latin small letter y with diaeresis
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HTML Tags <!--> <!DOCTYPE> <a> <abbr> <acronym> <address> <applet> <area> <article> <aside> <audio> <b> <base> <basefont> <bdi> <bdo> <big> <blockquote> <body> <br> <button> <canvas> <caption> <center> <cite> <code> <col> <colgroup> <data> <datalist> <dd> <del> <details> <dfn> <dialog> <dir> <div> <dl> <dt> <em> <embed> <fieldset> <figcaption> <figure> <font> <footer> <form> <frame> <frameset> <h1> - <h6> <head> <header> <hr> <html> <i> <iframe> <img> <input> <ins> <kbd> <label> <legend> <li> <link> <main> <map> <mark> <meta> <meter> <nav> <noframes> <noscript> <object> <ol> <optgroup> <option> <output> <p> <param> <picture> <pre> <progress> <q> <rp> <rt> <ruby> <s> <samp> <script> <section> <select> <small> <source> <span> <strike> <strong> <style> <sub> <summary> <sup> <svg> <table> <tbody> <td> <template> <textarea> <tfoot> <th> <thead> <time> <title> <tr> <track> <tt> <u> <ul> <var> <video> <wbr>

HTML <!DOCTYPE> The HTML Document Type All HTML documents must start with a <!DOCTYPE> declaration.

The declaration is not an HTML tag. It is an "information" to the browser about what document type to expect.

In HTML5, the <!DOCTYPE> declaration is simple:

<!DOCTYPE html> In older documents (HTML 4 or XHTML), the declaration is more complicated because the declaration must refer to a DTD (Document Type Definition).

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> You can read more about document types in the <!DOCTYPE> reference.

Valid HTML Elements in Different DOCTYPES Tag HTML 5 HTML 4 XHTML <a> Yes Yes Yes <abbr> Yes Yes Yes <acronym> No Yes Yes <address> Yes Yes Yes <applet> No Yes No <area> Yes Yes No <article> Yes No No <aside> Yes No No <audio> Yes No No <b> Yes Yes Yes <base> Yes Yes Yes <basefont> No Yes No <bdi> Yes No No <bdo> Yes Yes No <big> No Yes Yes <blockquote> Yes Yes Yes <body> Yes Yes Yes <br> Yes Yes Yes <button> Yes Yes Yes <canvas> Yes No No <caption> Yes Yes Yes <center> No Yes No <cite> Yes Yes Yes <code> Yes Yes Yes <col> Yes Yes No <colgroup> Yes Yes No <datalist> Yes No No <dd> Yes Yes Yes <del> Yes Yes No <details> Yes No No <dfn> Yes Yes Yes <dialog> Yes No No <dir> No Yes No <div> Yes Yes Yes <dl> Yes Yes Yes <dt> Yes Yes Yes <em> Yes Yes Yes <embed> Yes No No <fieldset> Yes Yes Yes <figcaption> Yes No No <figure> Yes No No <font> No Yes No <footer> Yes No No <form> Yes Yes Yes <frame> No No No <frameset> No Yes No <h1> to <h6> Yes Yes Yes <head> Yes Yes Yes <header> Yes No No <hr> Yes Yes Yes <html> Yes Yes Yes <i> Yes Yes Yes <iframe> Yes Yes No <img> Yes Yes Yes <input> Yes Yes Yes <ins> Yes Yes No <kbd> Yes Yes Yes <label> Yes Yes Yes <legend> Yes Yes Yes <li> Yes Yes Yes <link> Yes Yes Yes <main> Yes No No <map> Yes Yes No <mark> Yes No No <meta> Yes Yes Yes <meter> Yes No No <nav> Yes No No <noframes> No Yes No <noscript> Yes Yes Yes <object> Yes Yes Yes <ol> Yes Yes Yes <optgroup> Yes Yes Yes <option> Yes Yes Yes <output> Yes No No <p> Yes Yes Yes <param> Yes Yes Yes <pre> Yes Yes Yes <progress> Yes No No <q> Yes Yes Yes <rp> Yes No No <rt> Yes No No <ruby> Yes No No <s> Yes Yes No <samp> Yes Yes Yes <script> Yes Yes Yes <section> Yes No No <select> Yes Yes Yes <small> Yes Yes Yes <source> Yes No No <span> Yes Yes Yes <strike> No Yes No <strong> Yes Yes Yes <style> Yes Yes Yes <sub> Yes Yes Yes <summary> Yes No No <sup> Yes Yes Yes <table> Yes Yes Yes <tbody> Yes Yes No <td> Yes Yes Yes <textarea> Yes Yes Yes <tfoot> Yes Yes No <th> Yes Yes Yes <thead> Yes Yes No <time> Yes No No <title> Yes Yes Yes <tr> Yes Yes Yes <track> Yes No No <tt> No Yes Yes <u> Yes Yes No <ul> Yes Yes Yes <var> Yes Yes Yes <video> Yes No No <wbr> Yes No No
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HTML Tags <!--> <!DOCTYPE> <a> <abbr> <acronym> <address> <applet> <area> <article> <aside> <audio> <b> <base> <basefont> <bdi> <bdo> <big> <blockquote> <body> <br> <button> <canvas> <caption> <center> <cite> <code> <col> <colgroup> <data> <datalist> <dd> <del> <details> <dfn> <dialog> <dir> <div> <dl> <dt> <em> <embed> <fieldset> <figcaption> <figure> <font> <footer> <form> <frame> <frameset> <h1> - <h6> <head> <header> <hr> <html> <i> <iframe> <img> <input> <ins> <kbd> <label> <legend> <li> <link> <main> <map> <mark> <meta> <meter> <nav> <noframes> <noscript> <object> <ol> <optgroup> <option> <output> <p> <param> <picture> <pre> <progress> <q> <rp> <rt> <ruby> <s> <samp> <script> <section> <select> <small> <source> <span> <strike> <strong> <style> <sub> <summary> <sup> <svg> <table> <tbody> <td> <template> <textarea> <tfoot> <th> <thead> <time> <title> <tr> <track> <tt> <u> <ul> <var> <video> <wbr>

HTML URL Encoding Reference URL - Uniform Resource Locator Web browsers request pages from web servers by using a URL.

The URL is the address of a web page, like: https://www.w3schools.com.

URL Encoding (Percent Encoding) URL encoding converts characters into a format that can be transmitted over the Internet.

URLs can only be sent over the Internet using the ASCII character-set.

Since URLs often contain characters outside the ASCII set, the URL has to be converted into a valid ASCII format.

URL encoding replaces unsafe ASCII characters with a "%" followed by two hexadecimal digits. URLs cannot contain spaces. URL encoding normally replaces a space with a plus (+) sign or with %20.

Try It Yourself If you click the "Submit" button below, the browser will URL encode the input before it is sent to the server. A page at the server will display the received input.

Hello Günter

Try some other input and click Submit again.

URL Encoding Functions In JavaScript, PHP, and ASP there are functions that can be used to URL encode a string.

PHP has the rawurlencode() function, and ASP has the Server.URLEncode() function.

In JavaScript you can use the encodeURIComponent() function.

Click the "URL Encode" button to see how the JavaScript function encodes the text.

Hello Günter

Note: The JavaScript function encodes space as %20.

ASCII Encoding Reference Your browser will encode input, according to the character-set used in your page.

The default character-set in HTML5 is UTF-8.

Character From Windows-1252 From UTF-8 space %20 %20 ! %21 %21 " %22 %22

%23 %23
$ %24 %24 % %25 %25 & %26 %26 ' %27 %27 ( %28 %28 ) %29 %29

%2A %2A
%2B %2B , %2C %2C
%2D %2D . %2E %2E / %2F %2F 0 %30 %30 1 %31 %31 2 %32 %32 3 %33 %33 4 %34 %34 5 %35 %35 6 %36 %36 7 %37 %37 8 %38 %38 9 %39 %39 : %3A %3A ; %3B %3B < %3C %3C = %3D %3D > %3E %3E ? %3F %3F @ %40 %40 A %41 %41 B %42 %42 C %43 %43 D %44 %44 E %45 %45 F %46 %46 G %47 %47 H %48 %48 I %49 %49 J %4A %4A K %4B %4B L %4C %4C M %4D %4D N %4E %4E O %4F %4F P %50 %50 Q %51 %51 R %52 %52 S %53 %53 T %54 %54 U %55 %55 V %56 %56 W %57 %57 X %58 %58 Y %59 %59 Z %5A %5A [ %5B %5B \ %5C %5C ] %5D %5D ^ %5E %5E _ %5F %5F %60 %60 a %61 %61 b %62 %62 c %63 %63 d %64 %64 e %65 %65 f %66 %66 g %67 %67 h %68 %68 i %69 %69 j %6A %6A k %6B %6B l %6C %6C m %6D %6D n %6E %6E o %6F %6F p %70 %70 q %71 %71 r %72 %72 s %73 %73 t %74 %74 u %75 %75 v %76 %76 w %77 %77 x %78 %78 y %79 %79 z %7A %7A { %7B %7B | %7C %7C } %7D %7D ~ %7E %7E %7F %7F %80 %E2%82%AC  %81 %81 ‚ %82 %E2%80%9A ƒ %83 %C6%92 „ %84 %E2%80%9E … %85 %E2%80%A6 † %86 %E2%80%A0 ‡ %87 %E2%80%A1 ˆ %88 %CB%86 ‰ %89 %E2%80%B0 Š %8A %C5%A0 ‹ %8B %E2%80%B9 Œ %8C %C5%92  %8D %C5%8D Ž %8E %C5%BD  %8F %8F  %90 %C2%90 ‘ %91 %E2%80%98 ’ %92 %E2%80%99 “ %93 %E2%80%9C ” %94 %E2%80%9D • %95 %E2%80%A2 – %96 %E2%80%93 — %97 %E2%80%94 ˜ %98 %CB%9C ™ %99 %E2%84 š %9A %C5%A1 › %9B %E2%80 œ %9C %C5%93  %9D %9D ž %9E %C5%BE Ÿ %9F %C5%B8 %A0 %C2%A0 ¡ %A1 %C2%A1 ¢ %A2 %C2%A2 £ %A3 %C2%A3 ¤ %A4 %C2%A4 ¥ %A5 %C2%A5 ¦ %A6 %C2%A6 § %A7 %C2%A7 ¨ %A8 %C2%A8 © %A9 %C2%A9 ª %AA %C2%AA « %AB %C2%AB ¬ %AC %C2%AC ­ %AD %C2%AD ® %AE %C2%AE ¯ %AF %C2%AF ° %B0 %C2%B0 ± %B1 %C2%B1 ² %B2 %C2%B2 ³ %B3 %C2%B3 ´ %B4 %C2%B4 µ %B5 %C2%B5 ¶ %B6 %C2%B6 · %B7 %C2%B7 ¸ %B8 %C2%B8 ¹ %B9 %C2%B9 º %BA %C2%BA » %BB %C2%BB ¼ %BC %C2%BC ½ %BD %C2%BD ¾ %BE %C2%BE ¿ %BF %C2%BF À %C0 %C3%80 Á %C1 %C3%81 Â %C2 %C3%82 Ã %C3 %C3%83 Ä %C4 %C3%84 Å %C5 %C3%85 Æ %C6 %C3%86 Ç %C7 %C3%87 È %C8 %C3%88 É %C9 %C3%89 Ê %CA %C3%8A Ë %CB %C3%8B Ì %CC %C3%8C Í %CD %C3%8D Î %CE %C3%8E Ï %CF %C3%8F Ð %D0 %C3%90 Ñ %D1 %C3%91 Ò %D2 %C3%92 Ó %D3 %C3%93 Ô %D4 %C3%94 Õ %D5 %C3%95 Ö %D6 %C3%96 × %D7 %C3%97 Ø %D8 %C3%98 Ù %D9 %C3%99 Ú %DA %C3%9A Û %DB %C3%9B Ü %DC %C3%9C Ý %DD %C3%9D Þ %DE %C3%9E ß %DF %C3%9F à %E0 %C3%A0 á %E1 %C3%A1 â %E2 %C3%A2 ã %E3 %C3%A3 ä %E4 %C3%A4 å %E5 %C3%A5 æ %E6 %C3%A6 ç %E7 %C3%A7 è %E8 %C3%A8 é %E9 %C3%A9 ê %EA %C3%AA ë %EB %C3%AB ì %EC %C3%AC í %ED %C3%AD î %EE %C3%AE ï %EF %C3%AF ð %F0 %C3%B0 ñ %F1 %C3%B1 ò %F2 %C3%B2 ó %F3 %C3%B3 ô %F4 %C3%B4 õ %F5 %C3%B5 ö %F6 %C3%B6 ÷ %F7 %C3%B7 ø %F8 %C3%B8 ù %F9 %C3%B9 ú %FA %C3%BA û %FB %C3%BB ü %FC %C3%BC ý %FD %C3%BD þ %FE %C3%BE ÿ %FF %C3%BF URL Encoding Reference The ASCII control characters %00-%1F were originally designed to control hardware devices.
Control characters have nothing to do inside a URL.

ASCII Character Description URL-encoding NUL null character %00 SOH start of header %01 STX start of text %02 ETX end of text %03 EOT end of transmission %04 ENQ enquiry %05 ACK acknowledge %06 BEL bell (ring) %07 BS backspace %08 HT horizontal tab %09 LF line feed %0A VT vertical tab %0B FF form feed %0C CR carriage return %0D SO shift out %0E SI shift in %0F DLE data link escape %10 DC1 device control 1 %11 DC2 device control 2 %12 DC3 device control 3 %13 DC4 device control 4 %14 NAK negative acknowledge %15 SYN synchronize %16 ETB end transmission block %17 CAN cancel %18 EM end of medium %19 SUB substitute %1A ESC escape %1B FS file separator %1C GS group separator %1D RS record separator %1E US unit separator %1F
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HTML Language Code Reference ISO Language Codes You should always include the lang attribute inside the <html> tag, to declare the language of the Web page. This is meant to assist search engines and browsers:

<html lang="en"> … </html> In XHTML, the language is declared inside the <html> tag as follows:

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> … </html> ISO 639-1 Language Codes ISO 639-1 defines abbreviations for languages:

See also: Reference for Country Codes.

Language ISO Code Abkhazian ab Afar aa Afrikaans af Akan ak Albanian sq Amharic am Arabic ar Aragonese an Armenian hy Assamese as Avaric av Avestan ae Aymara ay Azerbaijani az Bambara bm Bashkir ba Basque eu Belarusian be Bengali (Bangla) bn Bihari bh Bislama bi Bosnian bs Breton br Bulgarian bg Burmese my Catalan ca Chamorro ch Chechen ce Chichewa, Chewa, Nyanja ny Chinese zh Chinese (Simplified) zh-Hans Chinese (Traditional) zh-Hant Chuvash cv Cornish kw Corsican co Cree cr Croatian hr Czech cs Danish da Divehi, Dhivehi, Maldivian dv Dutch nl Dzongkha dz English en Esperanto eo Estonian et Ewe ee Faroese fo Fijian fj Finnish fi French fr Fula, Fulah, Pulaar, Pular ff Galician gl Gaelic (Scottish) gd Gaelic (Manx) gv Georgian ka German de Greek el Greenlandic kl Guarani gn Gujarati gu Haitian Creole ht Hausa ha Hebrew he Herero hz Hindi hi Hiri Motu ho Hungarian hu Icelandic is Ido io Igbo ig Indonesian id, in Interlingua ia Interlingue ie Inuktitut iu Inupiak ik Irish ga Italian it Japanese ja Javanese jv Kalaallisut, Greenlandic kl Kannada kn Kanuri kr Kashmiri ks Kazakh kk Khmer km Kikuyu ki Kinyarwanda (Rwanda) rw Kirundi rn Kyrgyz ky Komi kv Kongo kg Korean ko Kurdish ku Kwanyama kj Lao lo Latin la Latvian (Lettish) lv Limburgish ( Limburger) li Lingala ln Lithuanian lt Luga-Katanga lu Luganda, Ganda lg Luxembourgish lb Manx gv Macedonian mk Malagasy mg Malay ms Malayalam ml Maltese mt Maori mi Marathi mr Marshallese mh Moldavian mo Mongolian mn Nauru na Navajo nv Ndonga ng Northern Ndebele nd Nepali ne Norwegian no Norwegian bokmål nb Norwegian nynorsk nn Nuosu ii Occitan oc Ojibwe oj Old Church Slavonic, Old Bulgarian cu Oriya or Oromo (Afaan Oromo) om Ossetian os Pāli pi Pashto, Pushto ps Persian (Farsi) fa Polish pl Portuguese pt Punjabi (Eastern) pa Quechua qu Romansh rm Romanian ro Russian ru Sami se Samoan sm Sango sg Sanskrit sa Serbian sr Serbo-Croatian sh Sesotho st Setswana tn Shona sn Sichuan Yi ii Sindhi sd Sinhalese si Siswati ss Slovak sk Slovenian sl Somali so Southern Ndebele nr Spanish es Sundanese su Swahili (Kiswahili) sw Swati ss Swedish sv Tagalog tl Tahitian ty Tajik tg Tamil ta Tatar tt Telugu te Thai th Tibetan bo Tigrinya ti Tonga to Tsonga ts Turkish tr Turkmen tk Twi tw Uyghur ug Ukrainian uk Urdu ur Uzbek uz Venda ve Vietnamese vi Volapük vo Wallon wa Welsh cy Wolof wo Western Frisian fy Xhosa xh Yiddish yi, ji Yoruba yo Zhuang, Chuang za Zulu zu
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HTML ISO Country Codes Reference ISO Country Codes In HTML, country codes can be used as an addition to the language code in the lang attribute.

The first two characters of a language code defines the language of the Web page (See Language Code Reference).

The last two characters define the country.

The following example specifies English as language and United States as country:

<html lang="en-US"> … </html> ISO Country Codes Country ISO Code AFGHANISTAN AF ALBANIA AL ALGERIA DZ AMERICAN SAMOA AS ANDORRA AD ANGOLA AO ANTARCTICA AQ ANTIGUA AND BARBUDA AG ARGENTINA AR ARMENIA AM ARUBA AW AUSTRALIA AU AUSTRIA AT AZERBAIJAN AZ BAHAMAS BS BAHRAIN BH BANGLADESH BD BARBADOS BB BELARUS BY BELGIUM BE BELIZE BZ BENIN BJ BERMUDA BM BHUTAN BT BOLIVIA BO BOSNIA AND HERZEGOVINA BA BOTSWANA BW BOUVET ISLAND BV BRAZIL BR BRITISH INDIAN OCEAN TERRITORY IO BRUNEI DARUSSALAM BN BULGARIA BG BURKINA FASO BF BURUNDI BI CAMBODIA KH CAMEROON CM CANADA CA CAPE VERDE CV CAYMAN ISLANDS KY CENTRAL AFRICAN REPUBLIC CF CHAD TD CHILE CL CHINA CN CHRISTMAS ISLAND CX COCOS (KEELING) ISLANDS CC COLOMBIA CO COMOROS KM CONGO CG CONGO, THE DEMOCRATIC REPUBLIC OF THE CD COOK ISLANDS CK COSTA RICA CR CÔTE D'IVOIRE CI CROATIA HR CUBA CU CYPRUS CY CZECH REPUBLIC CZ DENMARK DK DJIBOUTI DJ DOMINICA DM DOMINICAN REPUBLIC DO ECUADOR EC EGYPT EG EL SALVADOR SV EQUATORIAL GUINEA GQ ERITREA ER ESTONIA EE ETHIOPIA ET FALKLAND ISLANDS (MALVINAS) FK FAROE ISLANDS FO FIJI FJ FINLAND FI FRANCE FR FRENCH GUIANA GF FRENCH POLYNESIA PF FRENCH SOUTHERN TERRITORIES TF GABON GA GAMBIA GM GEORGIA GE GERMANY DE GHANA GH GIBRALTAR GI GREECE GR GREENLAND GL GRENADA GD GUADELOUPE GP GUAM GU GUATEMALA GT GUINEA GN GUINEA-BISSAU GW GUYANA GY HAITI HT HEARD ISLAND AND MCDONALD ISLANDS HM HONDURAS HN HONG KONG HK HUNGARY HU ICELAND IS INDIA IN INDONESIA ID IRAN, ISLAMIC REPUBLIC OF IR IRAQ IQ IRELAND IE ISRAEL IL ITALY IT JAMAICA JM JAPAN JP JORDAN JO KAZAKHSTAN KZ KENYA KE KIRIBATI KI KOREA, DEMOCRATIC PEOPLE'S REPUBLIC OF KP KOREA, REPUBLIC OF KR KUWAIT KW KYRGYZSTAN KG LAO PEOPLE'S DEMOCRATIC REPUBLIC (LAOS) LA LATVIA LV LEBANON LB LESOTHO LS LIBERIA LR LIBYA, STATE OF LY LIECHTENSTEIN LI LITHUANIA LT LUXEMBOURG LU MACAO MO MACEDONIA, THE FORMER YUGOSLAV REPUBLIC OF MK MADAGASCAR MG MALAWI MW MALAYSIA MY MALDIVES MV MALI ML MALTA MT MARSHALL ISLANDS MH MARTINIQUE MQ MAURITANIA MR MAURITIUS MU MAYOTTE YT MEXICO MX MICRONESIA, FEDERATED STATES OF FM MOLDOVA, REPUBLIC OF MD MONACO MC MONGOLIA MN MONTENEGRO ME MONTSERRAT MS MOROCCO MA MOZAMBIQUE MZ MYANMAR MM NAMIBIA NA NAURU NR NEPAL, FEDERAL DEMOCRATIC REPUBLIC OF NP NETHERLANDS NL NETHERLANDS ANTILLES AN NEW CALEDONIA NC NEW ZEALAND NZ NICARAGUA NI NIGER NE NIGERIA NG NIUE NU NORFOLK ISLAND NF NORTHERN MARIANA ISLANDS MP NORWAY NO OMAN OM PAKISTAN PK PALAU PW PALESTINE, STATE OF PS PANAMA PA PAPUA NEW GUINEA PG PARAGUAY PY PERU PE PHILIPPINES PH PITCAIRN PN POLAND PL PORTUGAL PT PUERTO RICO PR QATAR QA RÉUNION RE ROMANIA RO RUSSIAN FEDERATION RU RWANDA RW SAINT HELENA SH SAINT KITTS AND NEVIS KN SAINT LUCIA LC SAINT PIERRE AND MIQUELON PM SAINT VINCENT AND THE GRENADINES VC SAMOA WS SAN MARINO SM SAO TOME AND PRINCIPE ST SAUDI ARABIA SA SENEGAL SN SERBIA RS SEYCHELLES SC SIERRA LEONE SL SINGAPORE SG SLOVAKIA SK SLOVENIA SI SOLOMON ISLANDS SB SOMALIA SO SOUTH AFRICA ZA SOUTH GEORGIA AND THE SOUTH SANDWICH ISLANDS GS SOUTH SUDAN SS SPAIN ES SRI LANKA LK SUDAN SD SURINAME SR SVALBARD AND JAN MAYEN SJ SWAZILAND SZ SWEDEN SE SWITZERLAND CH SYRIAN ARAB REPUBLIC SY TAIWAN TW TAJIKISTAN TJ TANZANIA, UNITED REPUBLIC OF TZ THAILAND TH TIMOR-LESTE TL TOGO TG TOKELAU TK TONGA TO TRINIDAD AND TOBAGO TT TUNISIA TN TURKEY TR TURKMENISTAN TM TURKS AND CAICOS ISLANDS TC TUVALU TV UGANDA UG UKRAINE UA UNITED ARAB EMIRATES AE UNITED KINGDOM GB UNITED STATES US UNITED STATES MINOR OUTLYING ISLANDS UM URUGUAY UY UZBEKISTAN UZ VANUATU VU VENEZUELA VE VIET NAM VN VIRGIN ISLANDS, BRITISH VG VIRGIN ISLANDS, U.S. VI WALLIS AND FUTUNA WF WESTERN SAHARA EH YEMEN YE ZAMBIA ZM ZIMBABWE ZW
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HTTP Status Messages HTML Error Messages When a browser requests a service from a web server, an error might occur, and the server might return an error code like "404 Not Found".

It is common to name these errors HTML error messages.

But these messages are something called HTTP status messages. In fact, the server always returns a message for every request. The most common message is 200 OK.

Below is a list of HTTP status messages that might be returned:

1xx: Information Message: Description: 100 Continue The server has received the request headers, and the client should proceed to send the request body 101 Switching Protocols The requester has asked the server to switch protocols 103 Checkpoint Used in the resumable requests proposal to resume aborted PUT or POST requests 2xx: Successful Message: Description: 200 OK The request is OK (this is the standard response for successful HTTP requests) 201 Created The request has been fulfilled, and a new resource is created 202 Accepted The request has been accepted for processing, but the processing has not been completed 203 Non-Authoritative Information The request has been successfully processed, but is returning information that may be from another source 204 No Content The request has been successfully processed, but is not returning any content 205 Reset Content The request has been successfully processed, but is not returning any content, and requires that the requester reset the document view 206 Partial Content The server is delivering only part of the resource due to a range header sent by the client 3xx: Redirection Message: Description: 300 Multiple Choices A link list. The user can select a link and go to that location. Maximum five addresses
301 Moved Permanently The requested page has moved to a new URL 302 Found The requested page has moved temporarily to a new URL 303 See Other The requested page can be found under a different URL 304 Not Modified Indicates the requested page has not been modified since last requested 306 Switch Proxy No longer used 307 Temporary Redirect The requested page has moved temporarily to a new URL 308 Resume Incomplete Used in the resumable requests proposal to resume aborted PUT or POST requests

4xx: Client Error Message: Description: 400 Bad Request The request cannot be fulfilled due to bad syntax 401 Unauthorized The request was a legal request, but the server is refusing to respond to it. For use when authentication is possible but has failed or not yet been provided 402 Payment Required Reserved for future use 403 Forbidden The request was a legal request, but the server is refusing to respond to it 404 Not Found The requested page could not be found but may be available again in the future 405 Method Not Allowed A request was made of a page using a request method not supported by that page 406 Not Acceptable The server can only generate a response that is not accepted by the client 407 Proxy Authentication Required The client must first authenticate itself with the proxy 408 Request Timeout The server timed out waiting for the request 409 Conflict The request could not be completed because of a conflict in the request 410 Gone The requested page is no longer available 411 Length Required The "Content-Length" is not defined. The server will not accept the request without it 412 Precondition Failed The precondition given in the request evaluated to false by the server 413 Request Entity Too Large The server will not accept the request, because the request entity is too large 414 Request-URI Too Long The server will not accept the request, because the URL is too long. Occurs when you convert a POST request to a GET request with a long query information 415 Unsupported Media Type The server will not accept the request, because the media type is not supported 416 Requested Range Not Satisfiable The client has asked for a portion of the file, but the server cannot supply that portion 417 Expectation Failed The server cannot meet the requirements of the Expect request-header field 5xx: Server Error Message: Description: 500 Internal Server Error A generic error message, given when no more specific message is suitable 501 Not Implemented The server either does not recognize the request method, or it lacks the ability to fulfill the request 502 Bad Gateway The server was acting as a gateway or proxy and received an invalid response from the upstream server 503 Service Unavailable The server is currently unavailable (overloaded or down) 504 Gateway Timeout The server was acting as a gateway or proxy and did not receive a timely response from the upstream server 505 HTTP Version Not Supported The server does not support the HTTP protocol version used in the request 511 Network Authentication Required The client needs to authenticate to gain network access
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HTTP Request Methods What is HTTP? The Hypertext Transfer Protocol (HTTP) is designed to enable communications between clients and servers.

HTTP works as a request-response protocol between a client and server.

Example: A client (browser) sends an HTTP request to the server; then the server returns a response to the client. The response contains status information about the request and may also contain the requested content.

HTTP Methods GET POST PUT HEAD DELETE PATCH OPTIONS The two most common HTTP methods are: GET and POST.

The GET Method GET is used to request data from a specified resource.

GET is one of the most common HTTP methods.

Note that the query string (name/value pairs) is sent in the URL of a GET request:

/test/demo_form.php?name1=value1&name2=value2 Some other notes on GET requests:

GET requests can be cached GET requests remain in the browser history GET requests can be bookmarked GET requests should never be used when dealing with sensitive data GET requests have length restrictions GET requests are only used to request data (not modify) The POST Method POST is used to send data to a server to create/update a resource.

The data sent to the server with POST is stored in the request body of the HTTP request:

POST /test/demo_form.php HTTP/1.1 Host: w3schools.com name1=value1&name2=value2 POST is one of the most common HTTP methods.

Some other notes on POST requests:

POST requests are never cached POST requests do not remain in the browser history POST requests cannot be bookmarked POST requests have no restrictions on data length

The PUT Method PUT is used to send data to a server to create/update a resource.

The difference between POST and PUT is that PUT requests are idempotent. That is, calling the same PUT request multiple times will always produce the same result. In contrast, calling a POST request repeatedly have side effects of creating the same resource multiple times.

The HEAD Method HEAD is almost identical to GET, but without the response body.

In other words, if GET /users returns a list of users, then HEAD /users will make the same request but will not return the list of users.

HEAD requests are useful for checking what a GET request will return before actually making a GET request - like before downloading a large file or response body.

The DELETE Method The DELETE method deletes the specified resource.

The OPTIONS Method The OPTIONS method describes the communication options for the target resource.

Compare GET vs. POST The following table compares the two HTTP methods: GET and POST.

 GET POST
BACK button/Reload Harmless Data will be re-submitted (the browser should alert the user that the data are about to be re-submitted) Bookmarked Can be bookmarked Cannot be bookmarked Cached Can be cached Not cached Encoding type application/x-www-form-urlencoded application/x-www-form-urlencoded or multipart/form-data. Use multipart encoding for binary data History Parameters remain in browser history Parameters are not saved in browser history Restrictions on data length Yes, when sending data, the GET method adds the data to the URL; and the length of a URL is limited (maximum URL length is 2048 characters) No restrictions Restrictions on data type Only ASCII characters allowed No restrictions. Binary data is also allowed Security GET is less secure compared to POST because data sent is part of the URL

Never use GET when sending passwords or other sensitive information! POST is a little safer than GET because the parameters are not stored in browser history or in web server logs Visibility Data is visible to everyone in the URL Data is not displayed in the URL
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Pixels to Ems Conversion Pixel to Em Converter The tool below allows you to work out the em sizes from pixels (or vice versa).

Set a default pixel size for body (usually 16px) Then, convert a pixel value to em, based on the default pixel size Or, convert an em value to pixels, based on the default pixel size Set a default pixel size:

16 px

Convert PX to EM: pxConvert EM to PX: em Result:

Body Font Size In the table below, select a body font size in pixels (px) to display a complete "px to em and percent" conversion table.

Tip: The default font size is usually 16px.

px em percent 5px 0.3125em 31.25% 6px 0.3750em 37.50% 7px 0.4375em 43.75% 8px 0.5000em 50.00% 9px 0.5625em 56.25% 10px 0.6250em 62.50% 11px 0.6875em 68.75% 12px 0.7500em 75.00% 13px 0.8125em 81.25% 14px 0.8750em 87.50% 15px 0.9375em 93.75% 16px 1.0000em 100.00% 17px 1.0625em 106.25% 18px 1.1250em 112.50% 19px 1.1875em 118.75% 20px 1.2500em 125.00% 21px 1.3125em 131.25% 22px 1.3750em 137.50% 23px 1.4375em 143.75% 24px 1.5000em 150.00% 25px 1.5625em 156.25% What is the difference between PX, EM and Percent?

Pixel is a static measurement, while percent and EM are relative measurements. The size of an EM or percent depends on its parent. If the text size of body is 16 pixels, then 150% or 1.5 EM will be 24 pixels (1.5 * 16). Look at CSS Units for more measurement units.
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Keyboard Shortcuts Keyboard Shortcuts For Windows and Mac Keyboard shortcuts are often used in modern operating systems and computer software programs.

Learning and using keyboard shortcuts can save you a lot of time.

Basic Shortcuts Description Windows Mac OS Edit menu Alt + E Ctrl + F2 + F File menu Alt + F Ctrl + F2 + E View menu Alt + V Ctrl + F2 + V Select all text Ctrl + A Cmd + A Copy text Ctrl + C Cmd + C Find text Ctrl + F Cmd + F Find and replace text Ctrl + H Cmd + F New Document Ctrl + N Cmd + N Open a file Ctrl + O Cmd + O Print options Ctrl + P Cmd + P Save file Ctrl + S Cmd + S Paste text Ctrl + V Cmd + V Cut text Ctrl + X Cmd + X Redo text Ctrl + Y Shift + Cmd + Z Undo text Ctrl + Z Cmd + Z Text Editing Description Windows Mac OS Cursor Movement
Go to the right or to the beginning of next line break Right Arrow Right Arrow Go to the left or to the end of previous line break Left Arrow Left Arrow Go up one row Up Arrow Up Arrow Go down one row Down Arrow Down Arrow Go to the beginning of the current line Home Cmd + Left Arrow Go to the end of the current line End Cmd + Right Arrow Go to the beginning of the document Ctrl + Home Cmd + Up Arrow Go to the end of the document Ctrl + End Cmd + Down Arrow Move up one frame Page Up Fn + Up Arrow Move down one frame Page Down Fn + Down Arrow Go to beginning of previous word Ctrl + Left Arrow Option + Left Arrow Go to beginning of next word Ctrl + Right Arrow Option + Right Arrow Go to beginning of line break Ctrl + Up Arrow Cmd + Left Arrow Go to end of line break Ctrl + Down Arrow Cmd + Right Arrow

Text Selection
Select characters to the left Shift + Left Arrow Shift + Left Arrow Select characters to the right Shift + Right Arrow Shift + Right Arrow Select lines upwards Shift + Up Arrow Shift + Up Arrow Select lines downwards Shift + Down Arrow Shift + Down Arrow Select words to the left Shift + Ctrl + Left Shift + Opt + Left Select words to the right Shift + Ctrl + Right Shift + Opt + Right Select paragraphs to the left Shift + Ctrl + Up Shift + Opt + Up Select paragraphs to the right Shift + Ctrl + Down Shift + Opt + Down Select text between the cursor and the beginning of the current line Shift + Home Cmd + Shift + Left Arrow Select text between the cursor and the end of the current line Shift + End Cmd + Shift + Right Arrow Select text between the cursor and the beginning of the document Shift + Ctrl + Home Cmd + Shift + Up Arrow or Cmd + Shift + Fn + Left Arrow Select text between the cursor and the end of the document Shift + Ctrl + End Cmd + Shift + Down Arrow or Cmd + Shift + Fn + Right Arrow Select one frame at a time of text above the cursor Shift + Page Up Shift + Fn + Up Arrow Select one frame at a time of text below the cursor Shift + Page Down Shift + Fn + Down Arrow Select all text Ctrl + A Cmd + A Find text Ctrl + F Cmd + F

Text Formatting
Make selected text bold Ctrl + B Cmd + B Make selected text italic Ctrl + I Cmd + I Underline selected text Ctrl + U Cmd + U Make selected text superscript Ctrl + Shift + = Cmd + Shift + = Make selected text subscript Ctrl + = Cmd + =

Text Editing
Delete characters to the left Backspace Backspace Delete characters to the right Delete Fn + Backspace Delete words to the right Ctrl + Del Cmd + Backspace Delete words to the left Ctrl + Backspace Cmd + Fn + Backspace Indent Tab Tab Outdent Shift + Tab Shift + Tab Copy text Ctrl + C Cmd + C Find and replace text Ctrl + H Cmd + F Paste text Ctrl + V Cmd + V Cut text Ctrl + X Cmd + X Redo text Ctrl + Y Shift + Cmd + Z Undo text Ctrl + Z Cmd + Z

Web Browsers Description Windows Mac OS Navigation
Scroll down a frame Space or Page Down Space or Fn + Down Arrow Scroll up a frame Shift + Space or Page Up Shift + Space or Fn + Up Arrow Go to bottom of the page End Cmd + Down Arrow Go to top of the page Home Cmd + Up Arrow Go back Alt + Left Arrow or Backspace Cmd + Left Arrow Go forward Alt + Right Arrow or Shift + Backspace Cmd + Right Arrow Refresh a webpage F5 Cmd + R Refresh a webpage (no cache) Ctrl + F5 Cmd + Shift + R Stop Esc Esc Toggle full-screen F11 Cmd + Shift + F Zoom in Ctrl + + Cmd + + Zoom out Ctrl + - Cmd + - Zoom 100% (default) Ctrl + 0 Cmd + 0 Open homepage Alt + Home Option + Home or Option + Fn + Left Arrow Find text Ctrl + F Cmd + F

Tab / Window Management
Open a new tab Ctrl + T Cmd + T Close current tab Ctrl + W Cmd + W Close all tabs Ctrl + Shift + W Cmd + Q Close all tabs except the current tab Ctrl + Alt + F4 Cmd + Opt + W Go to next tab Ctrl + Tab Control + Tab or Cmd + Shift + Right Arrow Go to previous tab Ctrl + Shift + Tab Shift + Control + Tab or Cmd + Shift + Left Arrow Go to a specific tab number Ctrl + 1-8 Cmd + 1-8 Go to the last tab Ctrl + 9 Cmd + 9 Reopen the last closed tab Ctrl + Shift + T Cmd + Shift + T Open a new window Ctrl + N Cmd + N Close current window Alt + F4 Cmd + W Go to next window Alt + Tab Cmd + Tab Go to previous window Alt + Shift + Tab Cmd + Shift + Tab Reopen the last closed window Ctrl + Shift + N
Open links in a new tab in the background Ctrl + Click Cmd + Click Open links in a new tab in the foreground Ctrl + Shift + Click Cmd + Shift + Click Print current webpage Ctrl + P Cmd + P Save current webpage Ctrl + S Cmd + S

Address Bar
Cycle between toolbar, search bar, and page elements Tab Tab Go to browser's address bar Ctrl + L or Alt + D Cmd + L Focus and select the browser's search bar Ctrl + E Cmd + E / Cmd + K Open the address bar location in a new tab Alt + Enter Opt + Enter Display a list of previously typed addresses F4
Add "www." to the beginning and ".com" to the end of the text typed in the address bar (e.g., type "w3schools" and press Ctrl + Enter to open "www.w3schools.com") Ctrl + Enter Cmd + Enter or Control + Enter

Bookmarks
Open the bookmarks menu Ctrl + B Cmd + B Add bookmark for current page Ctrl + D Cmd + Opt + B or Cmd + Shift + B Open browsing history Ctrl + H Cmd + Shift + H or Cmd + Y Open download history Ctrl + J Cmd + J or Cmd + Shift + J Screenshots Description Windows Mac OS Save screenshot of the whole screen as file Cmd + Shift + 3 Copy screenshot of the whole screen to the clipboard PrtScr (Print Screen) or Ctrl + PrtScr Cmd + Ctrl + Shift + 3 Save screenshot of window as file Cmd + Shift + 4, then Space Copy screenshot of window to the clipboard Alt + PrtScr Cmd + Ctrl + Shift + 4, then Space Copy screenshot of wanted area to the clipboard Cmd + Ctrl + Shift + 4 Save screenshot of wanted area as file Cmd + Shift + 4 Note: Due to different keyboard setups, some shortcuts may not be compatible for all users.
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HTML Tags <!--> <!DOCTYPE> <a> <abbr> <acronym> <address> <applet> <area> <article> <aside> <audio> <b> <base> <basefont> <bdi> <bdo> <big> <blockquote> <body> <br> <button> <canvas> <caption> <center> <cite> <code> <col> <colgroup> <data> <datalist> <dd> <del> <details> <dfn> <dialog> <dir> <div> <dl> <dt> <em> <embed> <fieldset> <figcaption> <figure> <font> <footer> <form> <frame> <frameset> <h1> - <h6> <head> <header> <hr> <html> <i> <iframe> <img> <input> <ins> <kbd> <label> <legend> <li> <link> <main> <map> <mark> <meta> <meter> <nav> <noframes> <noscript> <object> <ol> <optgroup> <option> <output> <p> <param> <picture> <pre> <progress> <q> <rp> <rt> <ruby> <s> <samp> <script> <section> <select> <small> <source> <span> <strike> <strong> <style> <sub> <summary> <sup> <svg> <table> <tbody> <td> <template> <textarea> <tfoot> <th> <thead> <time> <title> <tr> <track> <tt> <u> <ul> <var> <video> <wbr>

HTML <!--…--> Tag

Example An HTML comment:

<!--This is a comment. Comments are not displayed in the browser-->

<p>This is a paragraph.</p> Definition and Usage The comment tag is used to insert comments in the source code. Comments are not displayed in the browsers.

You can use comments to explain your code, which can help you when you edit the source code at a later date. This is especially useful if you have a lot of code.

Browser Support Element
<!--…--> Yes Yes Yes Yes Yes Tips and Notes You can use the comment tag to "hide" scripts from browsers without support for scripts (so they don't show them as plain text):

<script type="text/javascript"> <!-- function displayMsg() { alert("Hello World!") } //--> </script> Note: The two forward slashes at the end of comment line (//) is the JavaScript comment symbol. This prevents JavaScript from executing the --> tag.

Standard Attributes The comment tag does not support any standard attributes.

More information about Standard Attributes.

Event Attributes The comment tag does not support any event attributes.

More information about Event Attributes.
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<!DOCTYPE html> <html> <body>

<!-- This is a comment --> <p>This is a paragraph.</p> <!-- Comments are not displayed in the browser -->

</body> </html>
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HTML Tags <!--> <!DOCTYPE> <a> <abbr> <acronym> <address> <applet> <area> <article> <aside> <audio> <b> <base> <basefont> <bdi> <bdo> <big> <blockquote> <body> <br> <button> <canvas> <caption> <center> <cite> <code> <col> <colgroup> <data> <datalist> <dd> <del> <details> <dfn> <dialog> <dir> <div> <dl> <dt> <em> <embed> <fieldset> <figcaption> <figure> <font> <footer> <form> <frame> <frameset> <h1> - <h6> <head> <header> <hr> <html> <i> <iframe> <img> <input> <ins> <kbd> <label> <legend> <li> <link> <main> <map> <mark> <meta> <meter> <nav> <noframes> <noscript> <object> <ol> <optgroup> <option> <output> <p> <param> <picture> <pre> <progress> <q> <rp> <rt> <ruby> <s> <samp> <script> <section> <select> <small> <source> <span> <strike> <strong> <style> <sub> <summary> <sup> <svg> <table> <tbody> <td> <template> <textarea> <tfoot> <th> <thead> <time> <title> <tr> <track> <tt> <u> <ul> <var> <video> <wbr>

HTML <!DOCTYPE> Declaration

Example <!DOCTYPE html> <html> <head> <title>Title of the document</title> </head>

<body> The content of the document…… </body>

</html> Definition and Usage All HTML documents must start with a <!DOCTYPE> declaration.

The declaration is not an HTML tag. It is an "information" to the browser about what document type to expect.

In HTML 5, the declaration is simple:

<!DOCTYPE html> Browser Support Element
<!DOCTYPE> Yes Yes Yes Yes Yes Older HTML Documents In older documents (HTML 4 or XHTML), the declaration is more complicated because the declaration must refer to a DTD (Document Type Definition).

HTML 4.01:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> XHTML 1.1:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> HTML Elements and Doctypes Look at our table of all HTML elements, and what Doctype each element appears in.

Tips and Notes Tip: The <!DOCTYPE> declaration is NOT case sensitive.

Examples <!DOCTYPE html> <!DocType html> <!Doctype html> <!doctype html>
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<!DOCTYPE html> <html> <head> <title>Title of the document</title> </head>

<body> The content of the document…… </body>

</html>
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HTML Tags <!--> <!DOCTYPE> <a> <abbr> <acronym> <address> <applet> <area> <article> <aside> <audio> <b> <base> <basefont> <bdi> <bdo> <big> <blockquote> <body> <br> <button> <canvas> <caption> <center> <cite> <code> <col> <colgroup> <data> <datalist> <dd> <del> <details> <dfn> <dialog> <dir> <div> <dl> <dt> <em> <embed> <fieldset> <figcaption> <figure> <font> <footer> <form> <frame> <frameset> <h1> - <h6> <head> <header> <hr> <html> <i> <iframe> <img> <input> <ins> <kbd> <label> <legend> <li> <link> <main> <map> <mark> <meta> <meter> <nav> <noframes> <noscript> <object> <ol> <optgroup> <option> <output> <p> <param> <picture> <pre> <progress> <q> <rp> <rt> <ruby> <s> <samp> <script> <section> <select> <small> <source> <span> <strike> <strong> <style> <sub> <summary> <sup> <svg> <table> <tbody> <td> <template> <textarea> <tfoot> <th> <thead> <time> <title> <tr> <track> <tt> <u> <ul> <var> <video> <wbr>

HTML <a> Tag

Example Create a link to W3Schools.com:

<a href="https://www.w3schools.com">Visit W3Schools.com!</a> More "Try it Yourself" examples below.

Definition and Usage The <a> tag defines a hyperlink, which is used to link from one page to another.

The most important attribute of the <a> element is the href attribute, which indicates the link's destination.

By default, links will appear as follows in all browsers:

An unvisited link is underlined and blue A visited link is underlined and purple An active link is underlined and red Tips and Notes Tip: If the <a> tag has no href attribute, it is only a placeholder for a hyperlink.

Tip: A linked page is normally displayed in the current browser window, unless you specify another target.

Tip: Use CSS to style links: CSS Links and CSS Buttons.

Browser Support Element
<a> Yes Yes Yes Yes Yes Attributes Attribute Value Description download filename Specifies that the target will be downloaded when a user clicks on the hyperlink href URL Specifies the URL of the page the link goes to hreflang languagecode Specifies the language of the linked document media mediaquery Specifies what media/device the linked document is optimized for ping listofURLs Specifies a space-separated list of URLs to which, when the link is followed, post requests with the body ping will be sent by the browser (in the background). Typically used for tracking. referrerpolicy no-referrer no-referrer-when-downgrade origin origin-when-cross-origin same-origin strict-origin-when-cross-origin unsafe-url Specifies which referrer information to send with the link rel alternate author bookmark external help license next nofollow noreferrer noopener prev search tag Specifies the relationship between the current document and the linked document target _blank _parent _self _top Specifies where to open the linked document type media_type Specifies the media type of the linked document Global Attributes The <a> tag also supports the Global Attributes in HTML.

Event Attributes The <a> tag also supports the Event Attributes in HTML.

More Examples Example How to use an image as a link:

<a href="https://www.w3schools.com"> <img border="0" alt="W3Schools" src="logo_w3s.gif" width="100" height="100"> </a> Example How to open a link in a new browser window:

<a href="https://www.w3schools.com" target="_blank">Visit W3Schools.com!</a> Example How to link to an email address:

<a href="mailto:someone@example.com">Send email</a> Example How to link to a phone number:

<a href="tel:+4733378901">+47 333 78 901</a> Example How to link to another section on the same page:

<a href="#section2">Go to Section 2</a> Example How to link to a JavaScript:

<a href="javascript:alert('Hello World!');">Execute JavaScript</a> Related Pages HTML tutorial: HTML Links

HTML DOM reference: Anchor Object

CSS Tutorial: Styling Links

Default CSS Settings Most browsers will display the <a> element with the following default values:

a:link, a:visited { color: (internal value); text-decoration: underline; cursor: auto; }

a:link:active, a:visited:active { color: (internal value); }




<!DOCTYPE html> <html> <body>

<h1>The a element</h1>

<a href="https://www.w3schools.com">Visit W3Schools.com!</a>

</body> </html>

<!DOCTYPE html> <html> <body>

<p> An image as a link: <a href="https://www.w3schools.com"> <img border="0" alt="W3Schools" src="logo_w3s.gif" width="100" height="100"> </a> </p>

</body> </html>

<!DOCTYPE html> <html> <body>

<h1>The a target attribute</h1>

<a href="https://www.w3schools.com" target="_blank">Visit W3Schools.com!</a>

<p>If you set the target attribute to "_blank", the link will open in a new browser window or a new tab.</p>

</body> </html>

<!DOCTYPE html> <html> <body>

<p>To create a link that opens in the user's email program (to let them send a new email), use mailto: inside the href attribute:</p>

<p><a href="mailto:someone@example.com">Send email</a></p>

</body> </html>

<!DOCTYPE html> <html> <body>

<p>To create a link to a telephone number, use tel: inside the href attribute:</p>

<p><a href="tel:+4733378901">+47 333 78 901</a></p>

</body> </html>

<!DOCTYPE html> <html> <body>

<a href="#section2">Go to Section 2</a>

<p>In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.</p> <p>"Whenever you feel like criticizing any one," he told me, "just remember that all the people in this world haven't had the advantages that you've had."</p> <p>He didn't say any more, but we've always been unusually communicative in a reserved way, and I understood that he meant a great deal more than that. In consequence, I'm inclined to reserve all judgments, a habit that has opened up many curious natures to me and also made me the victim of not a few veteran bores. The abnormal mind is quick to detect and attach itself to this quality when it appears in a normal person, and so it came about that in college I was unjustly accused of being a politician, because I was privy to the secret griefs of wild, unknown men. Most of the confidences were unsought-frequently I have feigned sleep, preoccupation, or a hostile levity when I realized by some unmistakable sign that an intimate revelation was quivering on the horizon; for the intimate revelations of young men, or at least the terms in which they express them, are usually plagiaristic and marred by obvious suppressions. Reserving judgments is a matter of infinite hope. I am still a little afraid of missing something if I forget that, as my father snobbishly suggested, and I snobbishly repeat, a sense of the fundamental decencies is parcelled out unequally at birth.</p> <p>And, after boasting this way of my tolerance, I come to the admission that it has a limit. Conduct may be founded on the hard rock or the wet marshes, but after a certain point I don't care what it's founded on. When I came back from the East last autumn I felt that I wanted the world to be in uniform and at a sort of moral attention forever; I wanted no more riotous excursions with privileged glimpses into the human heart. Only Gatsby, the man who gives his name to this book, was exempt from my reaction-Gatsby, who represented everything for which I have an unaffected scorn. If personality is an unbroken series of successful gestures, then there was something gorgeous about him, some heightened sensitivity to the promises of life, as if he were related to one of those intricate machines that register earthquakes ten thousand miles away. This responsiveness had nothing to do with that flabby impressionability which is dignified under the name of the "creative temperament"-it was an extraordinary gift for hope, a romantic readiness such as I have never found in any other person and which it is not likely I shall ever find again. No-Gatsby turned out all right at the end; it is what preyed on Gatsby, what foul dust floated in the wake of his dreams that temporarily closed out my interest in the abortive sorrows and short-winded elations of men.</p>

<h2 id="section2">Section 2</h2>

<p>In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.</p> <p>"Whenever you feel like criticizing any one," he told me, "just remember that all the people in this world haven't had the advantages that you've had."</p> <p>He didn't say any more, but we've always been unusually communicative in a reserved way, and I understood that he meant a great deal more than that. In consequence, I'm inclined to reserve all judgments, a habit that has opened up many curious natures to me and also made me the victim of not a few veteran bores. The abnormal mind is quick to detect and attach itself to this quality when it appears in a normal person, and so it came about that in college I was unjustly accused of being a politician, because I was privy to the secret griefs of wild, unknown men. Most of the confidences were unsought-frequently I have feigned sleep, preoccupation, or a hostile levity when I realized by some unmistakable sign that an intimate revelation was quivering on the horizon; for the intimate revelations of young men, or at least the terms in which they express them, are usually plagiaristic and marred by obvious suppressions. Reserving judgments is a matter of infinite hope. I am still a little afraid of missing something if I forget that, as my father snobbishly suggested, and I snobbishly repeat, a sense of the fundamental decencies is parcelled out unequally at birth.</p> <p>And, after boasting this way of my tolerance, I come to the admission that it has a limit. Conduct may be founded on the hard rock or the wet marshes, but after a certain point I don't care what it's founded on. When I came back from the East last autumn I felt that I wanted the world to be in uniform and at a sort of moral attention forever; I wanted no more riotous excursions with privileged glimpses into the human heart. Only Gatsby, the man who gives his name to this book, was exempt from my reaction-Gatsby, who represented everything for which I have an unaffected scorn. If personality is an unbroken series of successful gestures, then there was something gorgeous about him, some heightened sensitivity to the promises of life, as if he were related to one of those intricate machines that register earthquakes ten thousand miles away. This responsiveness had nothing to do with that flabby impressionability which is dignified under the name of the "creative temperament"-it was an extraordinary gift for hope, a romantic readiness such as I have never found in any other person and which it is not likely I shall ever find again. No-Gatsby turned out all right at the end; it is what preyed on Gatsby, what foul dust floated in the wake of his dreams that temporarily closed out my interest in the abortive sorrows and short-winded elations of men.</p>

</body> </html>

<!DOCTYPE html> <html> <body>

<a href="javascript:alert('Hello World!');">Execute JavaScript</a>

</body> </html>
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HTML Tags <!--> <!DOCTYPE> <a> <abbr> <acronym> <address> <applet> <area> <article> <aside> <audio> <b> <base> <basefont> <bdi> <bdo> <big> <blockquote> <body> <br> <button> <canvas> <caption> <center> <cite> <code> <col> <colgroup> <data> <datalist> <dd> <del> <details> <dfn> <dialog> <dir> <div> <dl> <dt> <em> <embed> <fieldset> <figcaption> <figure> <font> <footer> <form> <frame> <frameset> <h1> - <h6> <head> <header> <hr> <html> <i> <iframe> <img> <input> <ins> <kbd> <label> <legend> <li> <link> <main> <map> <mark> <meta> <meter> <nav> <noframes> <noscript> <object> <ol> <optgroup> <option> <output> <p> <param> <picture> <pre> <progress> <q> <rp> <rt> <ruby> <s> <samp> <script> <section> <select> <small> <source> <span> <strike> <strong> <style> <sub> <summary> <sup> <svg> <table> <tbody> <td> <template> <textarea> <tfoot> <th> <thead> <time> <title> <tr> <track> <tt> <u> <ul> <var> <video> <wbr>

HTML <abbr> Tag

Example An abbreviation is marked up as follows:

The <abbr title="World Health Organization">WHO</abbr> was founded in 1948. More "Try it Yourself" examples below.

Definition and Usage The <abbr> tag defines an abbreviation or an acronym, like "HTML", "CSS", "Mr.", "Dr.", "ASAP", "ATM".

Tip: Use the global title attribute to show the description for the abbreviation/acronym when you mouse over the element.

Browser Support Element
<abbr> Yes Yes Yes Yes Yes Global Attributes The <abbr> tag supports the Global Attributes in HTML.

Event Attributes The <abbr> tag supports the Event Attributes in HTML.

More Examples Example <abbr> can also be used with <dfn> to define an abbreviation:

<p><dfn><abbr title="Cascading Style Sheets">CSS</abbr> </dfn> is a language that describes the style of an HTML document.</p> Related Pages HTML DOM reference: Abbreviation Object

Default CSS Settings Most browsers will display the <abbr> element with the following default values:

Example abbr { display: inline; }
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<!DOCTYPE html> <html> <body>

<h1>The abbr element</h1>

<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>

</body> </html>

<!DOCTYPE html> <html> <body>

<h1>The abbr element + the dfn element</h1>

<p><dfn><abbr title="Cascading Style Sheets">CSS</abbr> </dfn> is a language that describes the style of an HTML document.</p>

</body> </html>
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<!DOCTYPE html> <html> <head> <style> abbr { display: inline; } </style> </head> <body>

<p>An abbr element is displayed like this:</p>

<p><abbr title="Hyper Text Markup Language">HTML</abbr> describes the structure of Web pages using markup.</p>

<p>Change the default CSS settings to see the effect.</p>

</body> </html>
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HTML Tags <!--> <!DOCTYPE> <a> <abbr> <acronym> <address> <applet> <area> <article> <aside> <audio> <b> <base> <basefont> <bdi> <bdo> <big> <blockquote> <body> <br> <button> <canvas> <caption> <center> <cite> <code> <col> <colgroup> <data> <datalist> <dd> <del> <details> <dfn> <dialog> <dir> <div> <dl> <dt> <em> <embed> <fieldset> <figcaption> <figure> <font> <footer> <form> <frame> <frameset> <h1> - <h6> <head> <header> <hr> <html> <i> <iframe> <img> <input> <ins> <kbd> <label> <legend> <li> <link> <main> <map> <mark> <meta> <meter> <nav> <noframes> <noscript> <object> <ol> <optgroup> <option> <output> <p> <param> <picture> <pre> <progress> <q> <rp> <rt> <ruby> <s> <samp> <script> <section> <select> <small> <source> <span> <strike> <strong> <style> <sub> <summary> <sup> <svg> <table> <tbody> <td> <template> <textarea> <tfoot> <th> <thead> <time> <title> <tr> <track> <tt> <u> <ul> <var> <video> <wbr>

HTML <acronym> Tag Not Supported in HTML5. The <acronym> tag was used in HTML 4 to define an acronym.

What to Use Instead? Example An acronym or abbreviation should be marked up with the <abbr> tag:

The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.
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<!DOCTYPE html> <html> <body>

<h1>The abbr element</h1>

<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>

</body> </html>
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HTML Tags <!--> <!DOCTYPE> <a> <abbr> <acronym> <address> <applet> <area> <article> <aside> <audio> <b> <base> <basefont> <bdi> <bdo> <big> <blockquote> <body> <br> <button> <canvas> <caption> <center> <cite> <code> <col> <colgroup> <data> <datalist> <dd> <del> <details> <dfn> <dialog> <dir> <div> <dl> <dt> <em> <embed> <fieldset> <figcaption> <figure> <font> <footer> <form> <frame> <frameset> <h1> - <h6> <head> <header> <hr> <html> <i> <iframe> <img> <input> <ins> <kbd> <label> <legend> <li> <link> <main> <map> <mark> <meta> <meter> <nav> <noframes> <noscript> <object> <ol> <optgroup> <option> <output> <p> <param> <picture> <pre> <progress> <q> <rp> <rt> <ruby> <s> <samp> <script> <section> <select> <small> <source> <span> <strike> <strong> <style> <sub> <summary> <sup> <svg> <table> <tbody> <td> <template> <textarea> <tfoot> <th> <thead> <time> <title> <tr> <track> <tt> <u> <ul> <var> <video> <wbr>

HTML <address> Tag

Example Contact information for Example.com:

<address> Written by <a href="mailto:webmaster@example.com">Jon Doe</a>.<br> Visit us at:<br> Example.com<br> Box 564, Disneyland<br> USA </address> Definition and Usage The <address> tag defines the contact information for the author/owner of a document or an article.

The contact information can be an email address, URL, physical address, phone number, social media handle, etc.

The text in the <address> element usually renders in italic, and browsers will always add a line break before and after the <address> element.

Browser Support Element
<address> Yes Yes Yes Yes Yes Global Attributes The <address> tag also supports the Global Attributes in HTML.

Event Attributes The <address> tag also supports the Event Attributes in HTML.

Related Pages HTML DOM reference: Address Object

Default CSS Settings Most browsers will display the <address> element with the following default values:

Example address { display: block; font-style: italic; }
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<!DOCTYPE html> <html> <body>

<h1>The address element</h1>

<address> Written by <a href="mailto:webmaster@example.com">Jon Doe</a>.<br> Visit us at:<br> Example.com<br> Box 564, Disneyland<br> USA </address>

</body> </html>
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<!DOCTYPE html> <html> <head> <style> address { display: block; font-style: italic; } </style> </head> <body>

<p>An address element is displayed like this:</p>

<address> Written by <a href="mailto:webmaster@example.com">Jon Doe</a>.<br> Visit us at:<br> Example.com<br> Box 564, Disneyland<br> USA </address>

<p>Change the default CSS settings to see the effect.</p>

</body> </html>
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HTML Tags <!--> <!DOCTYPE> <a> <abbr> <acronym> <address> <applet> <area> <article> <aside> <audio> <b> <base> <basefont> <bdi> <bdo> <big> <blockquote> <body> <br> <button> <canvas> <caption> <center> <cite> <code> <col> <colgroup> <data> <datalist> <dd> <del> <details> <dfn> <dialog> <dir> <div> <dl> <dt> <em> <embed> <fieldset> <figcaption> <figure> <font> <footer> <form> <frame> <frameset> <h1> - <h6> <head> <header> <hr> <html> <i> <iframe> <img> <input> <ins> <kbd> <label> <legend> <li> <link> <main> <map> <mark> <meta> <meter> <nav> <noframes> <noscript> <object> <ol> <optgroup> <option> <output> <p> <param> <picture> <pre> <progress> <q> <rp> <rt> <ruby> <s> <samp> <script> <section> <select> <small> <source> <span> <strike> <strong> <style> <sub> <summary> <sup> <svg> <table> <tbody> <td> <template> <textarea> <tfoot> <th> <thead> <time> <title> <tr> <track> <tt> <u> <ul> <var> <video> <wbr>

HTML <applet> Tag Not Supported in HTML5. The <applet> tag was used in HTML 4 to define an embedded applet (Plug-in).

Plug-ins Plug-ins are a computer programs that extend the standard functionality of the browser.

Plug-ins have been used for many different purposes:

Run Java applets Run ActiveX controls Display Flash movies Display maps Scan for viruses Verify a bank id Most browsers no longer support Java Applets and Plug-ins.

ActiveX controls are no longer supported in any browsers.

The support for Shockwave Flash has also been turned off in modern browsers.

What to Use Instead? If you want to embed a video, use the <video> tag:

Example <video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> Your browser does not support the video tag. </video> If you want to embed audio, use the <audio> tag:

Example <audio controls> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg"> Your browser does not support the audio tag. </audio>

To embed objects, you can use both the <embed> tag and the <object> tags:

Example Embed a document with the <embed> element:

<embed src="snippet.html"> Example Embed a picture with the <embed> element:

<embed src="pic_trulli.jpg"> Example Embed a document with the <object> element:

<object data="snippet.html"></object> Example Embed a picture with the <object> element:

<object data="pic_trulli.jpg"></object> Tip: To embed a picture, it is better to use the <img> tag. To embed a document, it is better to use the <iframe> tag.
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<!DOCTYPE html> <html> <body>

<h1>The video element</h1>

<video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> Your browser does not support the video tag. </video>

</body> </html>

<!DOCTYPE html> <html> <body>

<h1>The audio element</h1>

<p>Click on the play button to play a sound:</p>

<audio controls> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio>

</body> </html>

<!DOCTYPE html> <html> <body>

<h1>The embed element</h1>

<embed type="text/html" src="snippet.html" width="500" height="200">

</body> </html>

<!DOCTYPE html> <html> <body>

<h1>The embed element</h1>

<embed type="image/jpg" src="pic_trulli.jpg" width="300" height="200">

</body> </html>

<!DOCTYPE html> <html> <body>

<h1>The object element</h1>

<object data="snippet.html" width="500" height="200"> </object>

</body> </html>

<!DOCTYPE html> <html> <body>

<h1>The object element</h1>

<object data="pic_trulli.jpg" width="300" height="200"></object>

</body> </html>
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HTML Tags <!--> <!DOCTYPE> <a> <abbr> <acronym> <address> <applet> <area> <article> <aside> <audio> <b> <base> <basefont> <bdi> <bdo> <big> <blockquote> <body> <br> <button> <canvas> <caption> <center> <cite> <code> <col> <colgroup> <data> <datalist> <dd> <del> <details> <dfn> <dialog> <dir> <div> <dl> <dt> <em> <embed> <fieldset> <figcaption> <figure> <font> <footer> <form> <frame> <frameset> <h1> - <h6> <head> <header> <hr> <html> <i> <iframe> <img> <input> <ins> <kbd> <label> <legend> <li> <link> <main> <map> <mark> <meta> <meter> <nav> <noframes> <noscript> <object> <ol> <optgroup> <option> <output> <p> <param> <picture> <pre> <progress> <q> <rp> <rt> <ruby> <s> <samp> <script> <section> <select> <small> <source> <span> <strike> <strong> <style> <sub> <summary> <sup> <svg> <table> <tbody> <td> <template> <textarea> <tfoot> <th> <thead> <time> <title> <tr> <track> <tt> <u> <ul> <var> <video> <wbr>

HTML <area> Tag

Example An image map, with clickable areas:

<img src="workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">

<map name="workmap"> <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm"> <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm"> <area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.htm"> </map> More "Try it Yourself" examples below.

Definition and Usage The <area> tag defines an area inside an image map (an image map is an image with clickable areas).

<area> elements are always nested inside a <map> tag.

Note: The usemap attribute in <img> is associated with the <map> element's name attribute, and creates a relationship between the image and the map.

Browser Support Element
<area> Yes Yes Yes Yes Yes Attributes Attribute Value Description alt text Specifies an alternate text for the area. Required if the href attribute is present coords coordinates Specifies the coordinates of the area download filename Specifies that the target will be downloaded when a user clicks on the hyperlink href URL Specifies the hyperlink target for the area hreflang language_code Specifies the language of the target URL media media query Specifies what media/device the target URL is optimized for referrerpolicy no-referrer no-referrer-when-downgrade origin origin-when-cross-origin same-origin strict-origin-when-cross-origin unsafe-url Specifies which referrer information to send with the link rel alternate author bookmark help license next nofollow noreferrer prefetch prev search tag Specifies the relationship between the current document and the target URL shape default rect circle poly Specifies the shape of the area target _blank _parent _self top framename Specifies where to open the target URL type mediatype Specifies the media type of the target URL Global Attributes The <area> tag also supports the Global Attributes in HTML.

Event Attributes The <area> tag also supports the Event Attributes in HTML.

More Examples Example Another image map, with clickable areas:

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">

<map name="planetmap"> <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun"> <area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury"> <area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus"> </map> Related Pages HTML DOM reference: Area Object

Default CSS Settings Most browsers will display the <area> element with the following default values:

area { display: none; }
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<!DOCTYPE html> <html> <body>

<h1>The map and area elements</h1>

<p>Click on the computer, the phone, or the cup of coffee to go to a new page and read more about the topic:</p>

<img src="workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">

<map name="workmap"> <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm"> <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm"> <area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.htm"> </map>

</body> </html>

<!DOCTYPE html> <html> <body>

<h1>The map and area elements</h1>

<p>Click on the sun or on one of the planets to watch it closer:</p>

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">

<map name="planetmap"> <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm"> <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm"> <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm"> </map>

</body> </html>
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HTML Tags <!--> <!DOCTYPE> <a> <abbr> <acronym> <address> <applet> <area> <article> <aside> <audio> <b> <base> <basefont> <bdi> <bdo> <big> <blockquote> <body> <br> <button> <canvas> <caption> <center> <cite> <code> <col> <colgroup> <data> <datalist> <dd> <del> <details> <dfn> <dialog> <dir> <div> <dl> <dt> <em> <embed> <fieldset> <figcaption> <figure> <font> <footer> <form> <frame> <frameset> <h1> - <h6> <head> <header> <hr> <html> <i> <iframe> <img> <input> <ins> <kbd> <label> <legend> <li> <link> <main> <map> <mark> <meta> <meter> <nav> <noframes> <noscript> <object> <ol> <optgroup> <option> <output> <p> <param> <picture> <pre> <progress> <q> <rp> <rt> <ruby> <s> <samp> <script> <section> <select> <small> <source> <span> <strike> <strong> <style> <sub> <summary> <sup> <svg> <table> <tbody> <td> <template> <textarea> <tfoot> <th> <thead> <time> <title> <tr> <track> <tt> <u> <ul> <var> <video> <wbr>

HTML <article> Tag

Example Three articles with independent, self-contained content:

<article> <h2>Google Chrome</h2> <p>Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser today!</p> </article>

<article> <h2>Mozilla Firefox</h2> <p>Mozilla Firefox is an open-source web browser developed by Mozilla. Firefox has been the second most popular web browser since January, 2018.</p> </article>

<article> <h2>Microsoft Edge</h2> <p>Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge replaced Internet Explorer.</p> </article> More "Try it Yourself" examples below.

Definition and Usage The <article> tag specifies independent, self-contained content.

An article should make sense on its own and it should be possible to distribute it independently from the rest of the site.

Potential sources for the <article> element:

Forum post Blog post News story Note: The <article> element does not render as anything special in a browser. However, you can use CSS to style the <article> element (see example below).

Browser Support The numbers in the table specify the first browser version that fully supports the element.

Element
<article> 6.0 9.0 4.0 5.0 11.1 Global Attributes The <article> tag also supports the Global Attributes in HTML.

Event Attributes The <article> tag also supports the Event Attributes in HTML.

More Examples Example Use CSS to style the <article> element:

<html> <head> <style> .all-browsers { margin: 0; padding: 5px; background-color: lightgray; }

.all-browsers > h1, .browser { margin: 10px; padding: 5px; }

.browser { background: white; }

.browser > h2, p { margin: 4px; font-size: 90%; } </style> </head> <body>

<article class="all-browsers"> <h1>Most Popular Browsers</h1> <article class="browser"> <h2>Google Chrome</h2> <p>Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser today!</p> </article> <article class="browser"> <h2>Mozilla Firefox</h2> <p>Mozilla Firefox is an open-source web browser developed by Mozilla. Firefox has been the second most popular web browser since January, 2018.</p> </article> <article class="browser"> <h2>Microsoft Edge</h2> <p>Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge replaced Internet Explorer.</p> </article> </article>

</body> </html> Related Pages HTML DOM reference: Article Object

Default CSS Settings Most browsers will display the <article> element with the following default values:

article { display: block; }
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<!DOCTYPE html> <html> <body>

<h1>The article element</h1>

<article> <h2>Google Chrome</h2> <p>Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser today!</p> </article>

<article> <h2>Mozilla Firefox</h2> <p>Mozilla Firefox is an open-source web browser developed by Mozilla. Firefox has been the second most popular web browser since January, 2018.</p> </article>

<article> <h2>Microsoft Edge</h2> <p>Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge replaced Internet Explorer.</p> </article>

</body> </html>

<!DOCTYPE html> <html> <head> <style> .all-browsers { margin: 0; padding: 5px; background-color: lightgray; }

.all-browsers > h1, .browser { margin: 10px; padding: 5px; }

.browser { background: white; }

.browser > h2, p { margin: 4px; font-size: 90%; } </style> </head> <body>

<h1>The article element - Styled with CSS</h1>

<article class="all-browsers"> <h1>Most Popular Browsers</h1> <article class="browser"> <h2>Google Chrome</h2> <p>Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser today!</p> </article> <article class="browser"> <h2>Mozilla Firefox</h2> <p>Mozilla Firefox is an open-source web browser developed by Mozilla. Firefox has been the second most popular web browser since January, 2018.</p> </article> <article class="browser"> <h2>Microsoft Edge</h2> <p>Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge replaced Internet Explorer.</p> </article> </article>

</body> </html>
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HTML Tags <!--> <!DOCTYPE> <a> <abbr> <acronym> <address> <applet> <area> <article> <aside> <audio> <b> <base> <basefont> <bdi> <bdo> <big> <blockquote> <body> <br> <button> <canvas> <caption> <center> <cite> <code> <col> <colgroup> <data> <datalist> <dd> <del> <details> <dfn> <dialog> <dir> <div> <dl> <dt> <em> <embed> <fieldset> <figcaption> <figure> <font> <footer> <form> <frame> <frameset> <h1> - <h6> <head> <header> <hr> <html> <i> <iframe> <img> <input> <ins> <kbd> <label> <legend> <li> <link> <main> <map> <mark> <meta> <meter> <nav> <noframes> <noscript> <object> <ol> <optgroup> <option> <output> <p> <param> <picture> <pre> <progress> <q> <rp> <rt> <ruby> <s> <samp> <script> <section> <select> <small> <source> <span> <strike> <strong> <style> <sub> <summary> <sup> <svg> <table> <tbody> <td> <template> <textarea> <tfoot> <th> <thead> <time> <title> <tr> <track> <tt> <u> <ul> <var> <video> <wbr>

HTML <aside> Tag

Example Display some content aside from the content it is placed in:

<p>My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!</p>

<aside> <h4>Epcot Center</h4> <p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p> </aside> More "Try it Yourself" examples below.

Definition and Usage The <aside> tag defines some content aside from the content it is placed in.

The aside content should be indirectly related to the surrounding content.

Tip: The <aside> content is often placed as a sidebar in a document.

Note: The <aside> element does not render as anything special in a browser. However, you can use CSS to style the <aside> element (see example below).

Browser Support The numbers in the table specify the first browser version that fully supports the element.

Element
<aside> 6.0 9.0 4.0 5.0 11.1 Global Attributes The <aside> tag also supports the Global Attributes in HTML.

Event Attributes The <aside> tag also supports the Event Attributes in HTML.

More Examples Example Use CSS to style the <aside> element:

<html> <head> <style> aside { width: 30%; padding-left: 15px; margin-left: 15px; float: right; font-style: italic; background-color: lightgray; } </style> </head> <body>

<h1>The aside element</h1>

<p>My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!</p>

<aside> <p>The Epcot center is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p> </aside>

<p>My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!</p> <p>My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!</p>

</body> </html> Related Pages HTML DOM reference: Aside Object

Default CSS Settings Most browsers will display the <aside> element with the following default values:

aside { display: block; }
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<!DOCTYPE html> <html> <body>

<h1>The aside element</h1>

<p>My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!</p>

<aside> <h4>Epcot Center</h4> <p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p> </aside>

</body> </html>

<!DOCTYPE html> <html> <head> <style> aside { width: 30%; padding-left: 15px; margin-left: 15px; float: right; font-style: italic; background-color: lightgray; } </style> </head> <body>

<h1>The aside element - Styled with CSS</h1>

<p>My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!</p>

<aside> <p>The Epcot center is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p> </aside>

<p>My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!</p> <p>My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!</p>

</body> </html>
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HTML Tags <!--> <!DOCTYPE> <a> <abbr> <acronym> <address> <applet> <area> <article> <aside> <audio> <b> <base> <basefont> <bdi> <bdo> <big> <blockquote> <body> <br> <button> <canvas> <caption> <center> <cite> <code> <col> <colgroup> <data> <datalist> <dd> <del> <details> <dfn> <dialog> <dir> <div> <dl> <dt> <em> <embed> <fieldset> <figcaption> <figure> <font> <footer> <form> <frame> <frameset> <h1> - <h6> <head> <header> <hr> <html> <i> <iframe> <img> <input> <ins> <kbd> <label> <legend> <li> <link> <main> <map> <mark> <meta> <meter> <nav> <noframes> <noscript> <object> <ol> <optgroup> <option> <output> <p> <param> <picture> <pre> <progress> <q> <rp> <rt> <ruby> <s> <samp> <script> <section> <select> <small> <source> <span> <strike> <strong> <style> <sub> <summary> <sup> <svg> <table> <tbody> <td> <template> <textarea> <tfoot> <th> <thead> <time> <title> <tr> <track> <tt> <u> <ul> <var> <video> <wbr>

HTML <audio> Tag

Example Play a sound file:

<audio controls> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg"> Your browser does not support the audio tag. </audio> Definition and Usage The <audio> tag is used to embed sound content in a document, such as music or other audio streams.

The <audio> tag contains one or more <source> tags with different audio sources. The browser will choose the first source it supports.

The text between the <audio> and </audio> tags will only be displayed in browsers that do not support the <audio> element.

There are three supported audio formats in HTML: MP3, WAV, and OGG.

Audio Format and Browser Support Browser MP3 WAV OGG Edge / IE YES NO NO Chrome YES YES YES Firefox YES YES YES Safari YES YES NO Opera YES YES YES Tips and Notes Tip: For video files, look at the <video> tag.

Browser Support The numbers in the table specify the first browser version that fully supports the element.

Element
<audio> 4.0 9.0 3.5 4.0 11.5 Attributes Attribute Value Description autoplay autoplay Specifies that the audio will start playing as soon as it is ready controls controls Specifies that audio controls should be displayed (such as a play/pause button etc) loop loop Specifies that the audio will start over again, every time it is finished muted muted Specifies that the audio output should be muted preload auto metadata none Specifies if and how the author thinks the audio should be loaded when the page loads src URL Specifies the URL of the audio file Global Attributes The <audio> tag also supports the Global Attributes in HTML.

Event Attributes The <audio> tag also supports the Event Attributes in HTML.

Related Pages HTML DOM reference: HTML Audio/Video DOM Reference

Default CSS Settings None.
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<!DOCTYPE html> <html> <body>

<h1>The audio element</h1>

<p>Click on the play button to play a sound:</p>

<audio controls> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio>

</body> </html>
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HTML Tags <!--> <!DOCTYPE> <a> <abbr> <acronym> <address> <applet> <area> <article> <aside> <audio> <b> <base> <basefont> <bdi> <bdo> <big> <blockquote> <body> <br> <button> <canvas> <caption> <center> <cite> <code> <col> <colgroup> <data> <datalist> <dd> <del> <details> <dfn> <dialog> <dir> <div> <dl> <dt> <em> <embed> <fieldset> <figcaption> <figure> <font> <footer> <form> <frame> <frameset> <h1> - <h6> <head> <header> <hr> <html> <i> <iframe> <img> <input> <ins> <kbd> <label> <legend> <li> <link> <main> <map> <mark> <meta> <meter> <nav> <noframes> <noscript> <object> <ol> <optgroup> <option> <output> <p> <param> <picture> <pre> <progress> <q> <rp> <rt> <ruby> <s> <samp> <script> <section> <select> <small> <source> <span> <strike> <strong> <style> <sub> <summary> <sup> <svg> <table> <tbody> <td> <template> <textarea> <tfoot> <th> <thead> <time> <title> <tr> <track> <tt> <u> <ul> <var> <video> <wbr>

HTML <b> Tag

Example Make some text bold (without marking it as important):

<p>This is normal text - <b>and this is bold text</b>.</p> More "Try it Yourself" examples below.

Definition and Usage The <b> tag specifies bold text without any extra importance.

Tips and Notes Note: According to the HTML5 specification, the <b> tag should be used as a LAST resort when no other tag is more appropriate. The specification states that headings should be denoted with the <h1> to <h6> tags, emphasized text should be denoted with the <em> tag, important text should be denoted with the <strong> tag, and marked/highlighted text should be denoted with the <mark> tag.

Tip: You can also use the following CSS to set bold text: "font-weight: bold;".

Browser Support Element
<b> Yes Yes Yes Yes Yes Global Attributes The <b> tag also supports the Global Attributes in HTML.

Event Attributes The <b> tag also supports the Event Attributes in HTML.

More Examples Example Use CSS to set bold text:

<p>This is normal text - <span style="font-weight:bold;">and this is bold text</span>.</p> Related Pages HTML tutorial: HTML Text Formatting

HTML DOM reference: Bold Object

Default CSS Settings Most browsers will display the <b> element with the following default values:

Example b { font-weight: bold; }
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<!DOCTYPE html> <html> <body>

<h1>The b element</h1>

<p>This is normal text - <b>and this is bold text</b>.</p>

</body> </html>

<!DOCTYPE html> <html> <body>

<h1>Use CSS to Set Bold Text</h1>

<p>This is normal text - <span style="font-weight:bold;">and this is bold text</span>.</p>

</body> </html>

<!DOCTYPE html> <html> <head> <style> b { font-weight: bold; } </style> </head> <body>

<p>A b element is displayed like this:</p>

<p><b>This is bold text.</b></p>

<p>Change the default CSS settings to see the effect.</p>

</body> </html>
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HTML Tags <!--> <!DOCTYPE> <a> <abbr> <acronym> <address> <applet> <area> <article> <aside> <audio> <b> <base> <basefont> <bdi> <bdo> <big> <blockquote> <body> <br> <button> <canvas> <caption> <center> <cite> <code> <col> <colgroup> <data> <datalist> <dd> <del> <details> <dfn> <dialog> <dir> <div> <dl> <dt> <em> <embed> <fieldset> <figcaption> <figure> <font> <footer> <form> <frame> <frameset> <h1> - <h6> <head> <header> <hr> <html> <i> <iframe> <img> <input> <ins> <kbd> <label> <legend> <li> <link> <main> <map> <mark> <meta> <meter> <nav> <noframes> <noscript> <object> <ol> <optgroup> <option> <output> <p> <param> <picture> <pre> <progress> <q> <rp> <rt> <ruby> <s> <samp> <script> <section> <select> <small> <source> <span> <strike> <strong> <style> <sub> <summary> <sup> <svg> <table> <tbody> <td> <template> <textarea> <tfoot> <th> <thead> <time> <title> <tr> <track> <tt> <u> <ul> <var> <video> <wbr>

HTML <base> Tag

Example Specify a default URL and a default target for all links on a page:

<head> <base href="https://www.w3schools.com/" target="_blank"> </head>

<body> <img src="images/stickman.gif" width="24" height="39" alt="Stickman"> <a href="tags/tag_base.asp">HTML base Tag</a> </body> Definition and Usage The <base> tag specifies the base URL and/or target for all relative URLs in a document.

The <base> tag must have either an href or a target attribute present, or both.

There can only be one single <base> element in a document, and it must be inside the <head> element.

Browser Support Element
<base> Yes Yes Yes Yes Yes Attributes Attribute Value Description href URL Specifies the base URL for all relative URLs in the page target _blank _parent _self _top Specifies the default target for all hyperlinks and forms in the page Global Attributes and Events The <base> tag also supports the Global Attributes in HTML.

Event Attributes The <base> tag does not support any event attributes.

Related Pages HTML DOM reference: Base Object

Default CSS Settings None.
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<!DOCTYPE html> <html> <head> <base href="https://www.w3schools.com/" target="_blank"> </head> <body>

<h1>The base element</h1>

<p><img src="images/stickman.gif" width="24" height="39" alt="Stickman"> - Notice that we have only specified a relative address for the image. Since we have specified a base URL in the head section, the browser will look for the image at "https://www.w3schools.com/images/stickman.gif".</p>

<p><a href="tags/tagbase.asp">HTML base tag</a> - Notice that the link opens in a new window, even if it has no target="blank" attribute. This is because the target attribute of the base element is set to "_blank".</p>

</body> </html>
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HTML Tags <!--> <!DOCTYPE> <a> <abbr> <acronym> <address> <applet> <area> <article> <aside> <audio> <b> <base> <basefont> <bdi> <bdo> <big> <blockquote> <body> <br> <button> <canvas> <caption> <center> <cite> <code> <col> <colgroup> <data> <datalist> <dd> <del> <details> <dfn> <dialog> <dir> <div> <dl> <dt> <em> <embed> <fieldset> <figcaption> <figure> <font> <footer> <form> <frame> <frameset> <h1> - <h6> <head> <header> <hr> <html> <i> <iframe> <img> <input> <ins> <kbd> <label> <legend> <li> <link> <main> <map> <mark> <meta> <meter> <nav> <noframes> <noscript> <object> <ol> <optgroup> <option> <output> <p> <param> <picture> <pre> <progress> <q> <rp> <rt> <ruby> <s> <samp> <script> <section> <select> <small> <source> <span> <strike> <strong> <style> <sub> <summary> <sup> <svg> <table> <tbody> <td> <template> <textarea> <tfoot> <th> <thead> <time> <title> <tr> <track> <tt> <u> <ul> <var> <video> <wbr>

HTML <basefont> Tag Not Supported in HTML5. The <basefont> tag was used in HTML 4 to specify a default text-color, font-size or font-family for all the text in an HTML document.

What to Use Instead? Example Specify a default text-color for a page (with CSS):

<html> <head> <style> body { color: red; } </style> </head> <body>

<h1>This is a heading</h1> <p>This is a paragraph.</p>

</body> </html> Example Specify a default font-family for a page (with CSS):

<html> <head> <style> body { font-family: courier, serif; } </style> </head> <body>

<h1>This is a heading</h1> <p>This is a paragraph.</p>

</body> </html> Example Specify a default font-size for a page (with CSS):

<html> <head> <style> body { font-size: 50px; } </style> </head> <body>

<h1>This is a heading</h1> <p>This is a paragraph.</p>

</body> </html> Tip: In our CSS tutorial you can find more information about CSS text color and CSS fonts.
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<!DOCTYPE html> <html> <head> <style> body { color: red; } </style> </head> <body>

<h1>This is a heading</h1> <p>This is a paragraph.</p>

</body> </html>

<!DOCTYPE html> <html> <head> <style> body { font-family: courier, serif; } </style> </head> <body>

<h1>This is a heading</h1> <p>This is a paragraph.</p>

</body> </html>
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<!DOCTYPE html> <html> <head> <style> body { font-size: 50px; } </style> </head> <body>

<h1>This is a heading</h1> <p>This is a paragraph.</p>

</body> </html>
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HTML Tags <!--> <!DOCTYPE> <a> <abbr> <acronym> <address> <applet> <area> <article> <aside> <audio> <b> <base> <basefont> <bdi> <bdo> <big> <blockquote> <body> <br> <button> <canvas> <caption> <center> <cite> <code> <col> <colgroup> <data> <datalist> <dd> <del> <details> <dfn> <dialog> <dir> <div> <dl> <dt> <em> <embed> <fieldset> <figcaption> <figure> <font> <footer> <form> <frame> <frameset> <h1> - <h6> <head> <header> <hr> <html> <i> <iframe> <img> <input> <ins> <kbd> <label> <legend> <li> <link> <main> <map> <mark> <meta> <meter> <nav> <noframes> <noscript> <object> <ol> <optgroup> <option> <output> <p> <param> <picture> <pre> <progress> <q> <rp> <rt> <ruby> <s> <samp> <script> <section> <select> <small> <source> <span> <strike> <strong> <style> <sub> <summary> <sup> <svg> <table> <tbody> <td> <template> <textarea> <tfoot> <th> <thead> <time> <title> <tr> <track> <tt> <u> <ul> <var> <video> <wbr>

HTML <bdi> Tag

Example Isolate the usernames from the surrounding text-direction settings:

<ul> <li>User <bdi>hrefs</bdi>: 60 points</li> <li>User <bdi>jdoe</bdi>: 80 points</li> <li>User <bdi>إيان</bdi>: 90 points</li> </ul> Definition and Usage BDI stands for Bi-Directional Isolation.

The <bdi> tag isolates a part of text that might be formatted in a different direction from other text outside it.

This element is useful when embedding user-generated content with an unknown text direction.

Browser Support Element
<bdi> 16.0 79.0 10.0 Not supported 15.0 Global Attributes The <bdi> tag also supports the Global Attributes in HTML.

Event Attributes The <bdi> tag also supports the Event Attributes in HTML.
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<!DOCTYPE html> <html> <body>

<h1>The bdi element</h1>

<p>In the example below, usernames are shown along with the number of points in a contest. If the bdi element is not supported in the browser, the username of the Arabic user would confuse the text (the bidirectional algorithm would put the colon and the number "90" next to the word "User" rather than next to the word "points").</p>

<ul> <li>User <bdi>hrefs</bdi>: 60 points</li> <li>User <bdi>jdoe</bdi>: 80 points</li> <li>User <bdi>إيان</bdi>: 90 points</li> </ul>

</body> </html>
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HTML Tags <!--> <!DOCTYPE> <a> <abbr> <acronym> <address> <applet> <area> <article> <aside> <audio> <b> <base> <basefont> <bdi> <bdo> <big> <blockquote> <body> <br> <button> <canvas> <caption> <center> <cite> <code> <col> <colgroup> <data> <datalist> <dd> <del> <details> <dfn> <dialog> <dir> <div> <dl> <dt> <em> <embed> <fieldset> <figcaption> <figure> <font> <footer> <form> <frame> <frameset> <h1> - <h6> <head> <header> <hr> <html> <i> <iframe> <img> <input> <ins> <kbd> <label> <legend> <li> <link> <main> <map> <mark> <meta> <meter> <nav> <noframes> <noscript> <object> <ol> <optgroup> <option> <output> <p> <param> <picture> <pre> <progress> <q> <rp> <rt> <ruby> <s> <samp> <script> <section> <select> <small> <source> <span> <strike> <strong> <style> <sub> <summary> <sup> <svg> <table> <tbody> <td> <template> <textarea> <tfoot> <th> <thead> <time> <title> <tr> <track> <tt> <u> <ul> <var> <video> <wbr>

HTML <bdo> Tag

Example Specify the text direction:

<bdo dir="rtl"> This text will go right-to-left. </bdo> Definition and Usage BDO stands for Bi-Directional Override.

The <bdo> tag is used to override the current text direction.

Browser Support Element
<bdo> Yes Yes Yes Yes Yes Attributes Attribute Value Description dir ltr rtl Required. Specifies the text direction of the text inside the <bdo> element Global Attributes The <bdo> tag also supports the Global Attributes in HTML.

Event Attributes The <bdo> tag also supports the Event Attributes in HTML.

Related Pages HTML DOM reference: Bdo Object

Default CSS Settings Most browsers will display the <bdo> element with the following default values:

bdo { unicode-bidi: bidi-override; }
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<!DOCTYPE html> <html> <body>

<h1>The bdo element</h1>

<p>This paragraph will go left-to-right.</p>
<p><bdo dir="rtl">This paragraph will go right-to-left.</bdo></p>

</body> </html>
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HTML Tags <!--> <!DOCTYPE> <a> <abbr> <acronym> <address> <applet> <area> <article> <aside> <audio> <b> <base> <basefont> <bdi> <bdo> <big> <blockquote> <body> <br> <button> <canvas> <caption> <center> <cite> <code> <col> <colgroup> <data> <datalist> <dd> <del> <details> <dfn> <dialog> <dir> <div> <dl> <dt> <em> <embed> <fieldset> <figcaption> <figure> <font> <footer> <form> <frame> <frameset> <h1> - <h6> <head> <header> <hr> <html> <i> <iframe> <img> <input> <ins> <kbd> <label> <legend> <li> <link> <main> <map> <mark> <meta> <meter> <nav> <noframes> <noscript> <object> <ol> <optgroup> <option> <output> <p> <param> <picture> <pre> <progress> <q> <rp> <rt> <ruby> <s> <samp> <script> <section> <select> <small> <source> <span> <strike> <strong> <style> <sub> <summary> <sup> <svg> <table> <tbody> <td> <template> <textarea> <tfoot> <th> <thead> <time> <title> <tr> <track> <tt> <u> <ul> <var> <video> <wbr>

HTML <big> Tag Not Supported in HTML5. The <big> tag was used in HTML 4 to define bigger text.

What to Use Instead? Example Specify different font-sizes for HTML elements (with CSS):

<html> <head> <style> p.ex1 { font-size: 30px; } p.ex2 { font-size: 50px; } </style> </head> <body>

<p>This is a normal paragraph.</p> <p class="ex1">This is a bigger paragraph.</p> <p class="ex2">This is a much bigger paragraph.</p>

</body> </html> In our CSS tutorial you can find more information about CSS Font Size.
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<!DOCTYPE html> <html> <head> <style> p.ex1 { font-size: 30px; } p.ex2 { font-size: 50px; } </style> </head> <body>

<p>This is a normal paragraph.</p> <p class="ex1">This is a bigger paragraph.</p> <p class="ex2">This is a much bigger paragraph.</p>

</body> </html>





aaaaaaaaaaaaaaaaaaaiiiiiiiiiiiiiiiiaaaaaaaaaaaaaaaaiiiiiiiiiiiaiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiai




khaled6

https://www.w3schools.com/tags/tag_blockquote.asp




HTML <blockquote> Tag

Example A section that is quoted from another source:

<blockquote cite="http://www.worldwildlife.org/who/index.html"> For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally. </blockquote> More "Try it Yourself" examples below.

Definition and Usage The <blockquote> tag specifies a section that is quoted from another source.

Browsers usually indent <blockquote> elements (look at example below to see how to remove the indentation).

Tips and Notes Tip: Use <q> for inline (short) quotations.

Browser Support Element
<blockquote> Yes Yes Yes Yes Yes Attributes Attribute Value Description cite URL Specifies the source of the quotation Global Attributes The <blockquote> tag also supports the Global Attributes in HTML.

Event Attributes The <blockquote> tag also supports the Event Attributes in HTML.

More Examples Example Use CSS to remove the indentation from the blockquote element:

<html> <head> <style> blockquote { margin-left: 0; } </style> </head> <body>

<p>Here is a quote from WWF's website:</p>

<blockquote cite="http://www.worldwildlife.org/who/index.html"> For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally. </blockquote>

</body> </html> Related Pages HTML DOM reference: Blockquote Object

Default CSS Settings Most browsers will display the <blockquote> element with the following default values:

Example blockquote { display: block; margin-top: 1em; margin-bottom: 1em; margin-left: 40px; margin-right: 40px; }
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<!DOCTYPE html> <html> <body>

<h1>The blockquote element</h1>

<p>Here is a quote from WWF's website:</p>

<blockquote cite="http://www.worldwildlife.org/who/index.html"> For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally. </blockquote>

</body> </html>

<!DOCTYPE html> <html> <head> <style> blockquote { margin-left: 0; } </style> </head> <body>

<h1>Blockquote and CSS</h1>

<p>Use CSS to remove the indentation from the blockquote element.</p>

<p>Here is a quote from WWF's website:</p>

<blockquote cite="http://www.worldwildlife.org/who/index.html"> For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally. </blockquote>

</body> </html>

<!DOCTYPE html> <html> <head> <style> blockquote { display: block; margin-top: 1em; margin-bottom: 1em; margin-left: 40px; margin-right: 40px; } </style> </head> <body>

<p>A blockquote element is displayed like this:</p>

<blockquote cite="http://www.worldwildlife.org/who/index.html"> For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally. </blockquote>

<p>Change the default CSS settings to see the effect.</p>

</body> </html>
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HTML <body> Tag

Example A simple HTML document:

<html> <head> <title>Title of the document</title> </head>

<body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body>

</html> More "Try it Yourself" examples below.

Definition and Usage The <body> tag defines the document's body.

The <body> element contains all the contents of an HTML document, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.

Note: There can only be one <body> element in an HTML document.

Browser Support Element
<body> Yes Yes Yes Yes Yes Global Attributes The <body> tag also supports the Global Attributes in HTML.

Event Attributes The <body> tag also supports the Event Attributes in HTML.

More Examples Example Add a background image to a document (with CSS):

<html> <head> <style> body { background-image: url(w3s.png); } </style> </head> <body>

<h1>Hello world!</h1> <p><a href="https://www.w3schools.com">Visit W3Schools.com!</a></p>

</body> Example Set the background color of a document (with CSS):

<html> <head> <style> body { background-color: #E6E6FA; } </style> </head> <body>

<h1>Hello world!</h1> <p><a href="https://www.w3schools.com">Visit W3Schools.com!</a></p>

</body> Example Set the color of text in a document (with CSS):

<html> <head> <style> body { color: green; } </style> </head> <body>

<h1>Hello world!</h1> <p>This is some text.</p> <p><a href="https://www.w3schools.com">Visit W3Schools.com!</a></p>

</body> </html> Example Set the color of unvisited links in a document (with CSS):

<html> <head> <style> a:link { color:#0000FF; } </style> </head> <body>

<p><a href="https://www.w3schools.com">W3Schools.com</a></p> <p><a href="https://www.w3schools.com/html/">HTML Tutorial</a></p>

</body> </html> Example Set the color of active links in a document (with CSS):

<html> <head> <style> a:active { color:#00FF00; } </style> </head> <body>

<p><a href="https://www.w3schools.com">W3Schools.com</a></p> <p><a href="https://www.w3schools.com/html/">HTML Tutorial</a></p>

</body> </html> Example Set the color of visited links in a document (with CSS):

<html> <head> <style> a:visited { color:#FF0000; } </style> </head> <body>

<p><a href="https://www.w3schools.com">W3Schools.com</a></p> <p><a href="https://www.w3schools.com/html/">HTML Tutorial</a></p>

</body> </html> Related Pages HTML tutorial: HTML Elements

HTML DOM reference: Body Object

HTML DOM reference: document.body Property

Default CSS Settings Most browsers will display the <body> element with the following default values:

Example body { display: block; margin: 8px; }

body:focus { outline: none; }
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<!DOCTYPE html> <html> <head> <title>Title of the document</title> </head>

<body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body>

</html>

<!DOCTYPE html> <html> <head> <style> body { background-image: url(w3s.png); } </style> </head> <body>

<h1>Hello world!</h1> <p><a href="https://www.w3schools.com">Visit W3Schools.com!</a></p>

</body> </html>

<!DOCTYPE html> <html> <head> <style> body { background-color: #E6E6FA; } </style> </head> <body>

<h1>Hello world!</h1> <p><a href="https://www.w3schools.com">Visit W3Schools.com!</a></p>

</body> </html>

<!DOCTYPE html> <html> <head> <style> body { color: green; } </style> </head> <body>

<h1>Hello world!</h1> <p>This is some text.</p> <p><a href="https://www.w3schools.com">Visit W3Schools.com!</a></p>

</body> </html>

<!DOCTYPE html> <html> <head> <style> a:link { color: #0000FF; } </style> </head> <body>

<p><a href="https://www.w3schools.com">W3Schools.com</a></p> <p><a href="https://www.w3schools.com/html/">HTML Tutorial</a></p>

</body> </html>

<!DOCTYPE html> <html> <head> <style> a:active { color: #00FF00; } </style> </head> <body>

<p><a href="https://www.w3schools.com">W3Schools.com</a></p> <p><a href="https://www.w3schools.com/html/">HTML Tutorial</a></p>

</body> </html>

<!DOCTYPE html> <html> <head> <style> a:visited { color: #FF0000; } </style> </head> <body>

<p><a href="https://www.w3schools.com">W3Schools.com</a></p> <p><a href="https://www.w3schools.com/html/">HTML Tutorial</a></p>

</body> </html>

<!DOCTYPE html> <html> <head> <style> body { display: block; margin: 8px; }

body:focus { outline: none; } </style> </head> <body>

The content of the document……

<p>Change the default CSS settings to see the effect.</p>

</body> </html>
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HTML <br> Tag

Example Insert single line breaks in a text:

<p>To force<br> line breaks<br> in a text,<br> use the br<br> element.</p> More "Try it Yourself" examples below.

Definition and Usage The <br> tag inserts a single line break.

The <br> tag is useful for writing addresses or poems.

The <br> tag is an empty tag which means that it has no end tag.

Tips and Notes Note: Use the <br> tag to enter line breaks, not to add space between paragraphs.

Browser Support Element
<br> Yes Yes Yes Yes Yes Global Attributes The <br> tag also supports the Global Attributes in HTML.

Event Attributes The <br> tag also supports the Event Attributes in HTML.

More Examples Example Use <br> in a poem:

<p>Be not afraid of greatness.<br> Some are born great,<br> some achieve greatness,<br> and others have greatness thrust upon them.</p>

<p><em>-William Shakespeare</em></p> Related Pages HTML tutorial: HTML Paragraphs

HTML DOM reference: BR Object

Default CSS Settings None.
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<!DOCTYPE html> <html> <body>

<h1>The br element</h1>

<p>To force<br> line breaks<br> in a text,<br> use the br<br> element.</p>

</body> </html>

<!DOCTYPE html> <html> <body>

<h1>A Poem</h1>

<p>Be not afraid of greatness.<br> Some are born great,<br> some achieve greatness,<br> and others have greatness thrust upon them.</p>

<p><em>-William Shakespeare</em></p>

</body> </html>
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HTML <button> Tag

Example A clickable button is marked up as follows:

<button type="button">Click Me!</button> More "Try it Yourself" examples below.

Definition and Usage The <button> tag defines a clickable button.

Inside a <button> element you can put text (and tags like <i>, <b>, <strong>, <br>, <img>, etc.). That is not possible with a button created with the <input> element!

Tip: Always specify the type attribute for a <button> element, to tell browsers what type of button it is.

Tip: You can easily style buttons with CSS! Look at the examples below or visit our CSS Buttons tutorial.

Browser Support Element
<button> Yes Yes Yes Yes Yes Attributes Attribute Value Description autofocus autofocus Specifies that a button should automatically get focus when the page loads disabled disabled Specifies that a button should be disabled form form_id Specifies which form the button belongs to formaction URL Specifies where to send the form-data when a form is submitted. Only for type="submit" formenctype application/x-www-form-urlencoded multipart/form-data text/plain Specifies how form-data should be encoded before sending it to a server. Only for type="submit" formmethod get post Specifies how to send the form-data (which HTTP method to use). Only for type="submit" formnovalidate formnovalidate Specifies that the form-data should not be validated on submission. Only for type="submit" formtarget _blank _self _parent _top framename Specifies where to display the response after submitting the form. Only for type="submit" name name Specifies a name for the button type button reset submit Specifies the type of button value text Specifies an initial value for the button Global Attributes The <button> tag also supports the Global Attributes in HTML.

Event Attributes The <button> tag also supports the Event Attributes in HTML.

More Examples Example Use CSS to style buttons:

<!DOCTYPE html> <html> <head> <style> .button { border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; }

.button1 {background-color: #4CAF50;} /* Green / .button2 {background-color: #008CBA;} / Blue */ </style> </head> <body>

<button class="button button1">Green</button> <button class="button button2">Blue</button>

</body> </html> Example Use CSS to style buttons (with hover effect):

<!DOCTYPE html> <html> <head> <style> .button { border: none; color: white; padding: 16px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; transition-duration: 0.4s; cursor: pointer; }

.button1 { background-color: white; color: black; border: 2px solid #4CAF50; }

.button1:hover { background-color: #4CAF50; color: white; }

.button2 { background-color: white; color: black; border: 2px solid #008CBA; }

.button2:hover { background-color: #008CBA; color: white; }

</style> </head> <body>

<button class="button button1">Green</button> <button class="button button2">Blue</button>

</body> </html> Related Pages HTML DOM reference: Button Object

CSS Tutorial: Styling Buttons

Default CSS Settings None.
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<!DOCTYPE html> <html> <body>

<h1>The button Element</h1>

<button type="button" onclick="alert('Hello world!')">Click Me!</button>

</body> </html>

<!DOCTYPE html> <html> <head> <style> .button { border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; }

.button1 {background-color: #4CAF50;} /* Green / .button2 {background-color: #008CBA;} / Blue */ </style> </head> <body>

<h1>The button element - Styled with CSS</h1> <p>Change the background color of a button with the background-color property:</p>

<button class="button button1">Green</button> <button class="button button2">Blue</button>

</body> </html>

<!DOCTYPE html> <html> <head> <style> .button { border: none; color: white; padding: 16px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; transition-duration: 0.4s; cursor: pointer; }

.button1 { background-color: white; color: black; border: 2px solid #4CAF50; }

.button1:hover { background-color: #4CAF50; color: white; }

.button2 { background-color: white; color: black; border: 2px solid #008CBA; }

.button2:hover { background-color: #008CBA; color: white; }

</style> </head> <body>

<h1>The button element - Styled with CSS</h1>

<p>Use the :hover selector to change the style of the button when you move the mouse over it.</p> <p><strong>Tip:</strong> Use the transition-duration property to determine the speed of the "hover" effect:</p>

<button class="button button1">Green</button> <button class="button button2">Blue</button>

</body> </html>
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HTML <canvas> Tag

Example Draw a red rectangle on the fly, and show it inside the <canvas> element:

<canvas id="myCanvas"> Your browser does not support the canvas tag. </canvas>

<script> var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); ctx.fillStyle = "#FF0000"; ctx.fillRect(0, 0, 80, 80); </script> More "Try it Yourself" examples below.

Definition and Usage The <canvas> tag is used to draw graphics, on the fly, via scripting (usually JavaScript).

The <canvas> tag is transparent, and is only a container for graphics, you must use a script to actually draw the graphics.

Any text inside the <canvas> element will be displayed in browsers with JavaScript disabled and in browsers that do not support <canvas>.

Tips and Notes Tip: Learn more about the <canvas> element in our HTML Canvas Tutorial.

Tip: For a complete reference of all the properties and methods, please visit our HTML Canvas Reference.

Browser Support The numbers in the table specify the first browser version that fully supports the element.

Element
<canvas> 4.0 9.0 2.0 3.1 9.0 Attributes Attribute Value Description height pixels Specifies the height of the canvas. Default value is 150 width pixels Specifies the width of the canvas Default value is 300 Global Attributes The <canvas> tag also supports the Global Attributes in HTML.

Event Attributes The <canvas> tag also supports the Event Attributes in HTML.

More Examples Example Another <canvas> example:

<canvas id="myCanvas"> Your browser does not support the canvas tag. </canvas>

<script> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.fillStyle = "red"; ctx.fillRect(20, 20, 75, 50); //Turn transparency on ctx.globalAlpha = 0.2; ctx.fillStyle = "blue"; ctx.fillRect(50, 50, 75, 50); ctx.fillStyle = "green"; ctx.fillRect(80, 80, 75, 50); </script> Default CSS Settings Most browsers will display the <canvas> element with the following default values:

Example canvas { height: 150px; width: 300px; }
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<!DOCTYPE html> <html> <body>

<h1>The canvas element</h1>

<canvas id="myCanvas">Your browser does not support the canvas tag.</canvas>

<script> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.fillStyle = "#FF0000"; ctx.fillRect(0, 0, 80, 100); </script>

</body> </html>

<!DOCTYPE html> <html> <body>

<h1>The canvas element</h1>

<canvas id="myCanvas"> Your browser does not support the canvas tag. </canvas>

<script> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.fillStyle = "red"; ctx.fillRect(20, 20, 75, 50);

//Turn transparency on ctx.globalAlpha = 0.2; ctx.fillStyle = "blue"; ctx.fillRect(50, 50, 75, 50); ctx.fillStyle = "green"; ctx.fillRect(80, 80, 75, 50); </script>

</body> </html>

<!DOCTYPE html> <html> <head> <style> canvas { border:1px solid black; } </style> </head> <body>

<p>A canvas element is displayed like this:</p>

<canvas id="myCanvas">Your browser does not support the HTML5 canvas tag.</canvas>

<script> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.fillStyle = "#FF0000"; ctx.fillRect(0, 0, 80, 100); </script>

<p>Change the default CSS settings to see the effect.</p>

</body> </html>
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HTML <caption> Tag

Example A table with a caption:

<table> <caption>Monthly savings</caption> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> </table> More "Try it Yourself" examples below.

Definition and Usage The <caption> tag defines a table caption.

The <caption> tag must be inserted immediately after the <table> tag.

Tip: By default, a table caption will be center-aligned above a table. However, the CSS properties text-align and caption-side can be used to align and place the caption.

Browser Support Element
<caption> Yes Yes Yes Yes Yes Global Attributes The <caption> tag also supports the Global Attributes in HTML.

Event Attributes The <caption> tag also supports the Event Attributes in HTML.

More Examples Example Position table captions (with CSS):

<table> <caption style="text-align:right">My savings</caption> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> </table> <br>

<table> <caption style="caption-side:bottom">My savings</caption> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> </table> Related Pages HTML DOM reference: Caption Object

Default CSS Settings Most browsers will display the <caption> element with the following default values:

Example caption { display: table-caption; text-align: center; }
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<!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid black; } </style> </head> <body>

<h1>The caption element</h1>

<table> <caption>Monthly savings</caption> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$50</td> </tr> </table>

</body> </html>
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<!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid black; } </style> </head> <body>

<table> <caption style="text-align:right">My savings</caption> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> </table> <br>

<table> <caption style="caption-side:bottom">My savings</caption> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> </table>

</body> </html>
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<!DOCTYPE html> <html> <head> <style> table,th,td { border:1px solid black; }

caption { display: table-caption; text-align: center; } </style> </head> <body>

<p>A caption element is displayed like this:</p>

<table> <caption>Monthly savings</caption> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$50</td> </tr> </table>

<p>Change the default CSS settings to see the effect.</p>

</body> </html>
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HTML <center> Tag Not Supported in HTML5. The <center> tag was used in HTML4 to center-align text.

What to Use Instead? Example Center-align text (with CSS):

<html> <head> <style> h1 {text-align: center;} p {text-align: center;} div {text-align: center;} </style> </head> <body>

<h1>This is a heading</h1> <p>This is a paragraph.</p> <div>This is a div.</div>

</body> </html>
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<!DOCTYPE html> <html> <head> <style> h1 {text-align: center;} p {text-align: center;} div {text-align: center;} </style> </head> <body>

<h1>This is a heading</h1> <p>This is a paragraph.</p> <div>This is a div.</div>

</body> </html>
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HTML <cite> Tag

Example Define the title of a work with the <cite> tag:

<p><cite>The Scream</cite> by Edward Munch. Painted in 1893.</p> Definition and Usage The <cite> tag defines the title of a creative work (e.g. a book, a poem, a song, a movie, a painting, a sculpture, etc.).

Note: A person's name is not the title of a work.

The text in the <cite> element usually renders in italic.

Browser Support Element
<cite> Yes Yes Yes Yes Yes Global Attributes The <cite> tag also supports the Global Attributes in HTML.

Event Attributes The <cite> tag also supports the Event Attributes in HTML.

Related Pages HTML DOM reference: Cite Object

Default CSS Settings Most browsers will display the <cite> element with the following default values:

Example cite { font-style: italic; }




<!DOCTYPE html> <html> <body>

<h1>The cite element</h1>

<img src="imgthescream.jpg" width="220" height="277" alt="The Scream"> <p><cite>The Scream</cite> by Edward Munch. Painted in 1893.</p>

</body> </html>

<!DOCTYPE html> <html> <head> <style> cite { font-style: italic; } </style> </head> <body>

<p>A cite element is displayed like this:</p>

<p><cite>The Scream</cite> by Edward Munch. Painted in 1893.</p>

<p>Change the default CSS settings to see the effect.</p>

</body> </html>
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HTML <code> Tag

Example Define some text as computer code in a document:

<p>The HTML <code>button</code> tag defines a clickable button.</p>

<p>The CSS <code>background-color</code> property defines the background color of an element.</p> More "Try it Yourself" examples below.

Definition and Usage The <code> tag is used to define a piece of computer code. The content inside is displayed in the browser's default monospace font.

Tip: This tag is not deprecated. However, it is possible to achieve richer effect by using CSS (see example below).

Also look at:

Tag Description <samp> Defines sample output from a computer program <kbd> Defines keyboard input <var> Defines a variable <pre> Defines preformatted text Browser Support Element
<code> Yes Yes Yes Yes Yes Global Attributes The <code> tag also supports the Global Attributes in HTML.

Event Attributes The <code> tag also supports the Event Attributes in HTML.

More Examples Example Use CSS to style the <code> element:

<html> <head> <style> code { font-family: Consolas,"courier new"; color: crimson; background-color: #f1f1f1; padding: 2px; font-size: 105%; } </style> </head> <body>

<p>The HTML <code>button</code> tag defines a clickable button.</p> <p>The CSS <code>background-color</code> property defines the background color of an element.</p>

</body> </html> Related Pages HTML tutorial: HTML Text Formatting

HTML DOM reference: Code Object

Default CSS Settings Most browsers will display the <code> element with the following default values:

Example code { font-family: monospace; }




wwwwwwwww

<!DOCTYPE html> <html> <body>

<h1>The code element</h1>

<p>The HTML <code>button</code> tag defines a clickable button.</p>

<p>The CSS <code>background-color</code> property defines the background color of an element.</p>

</body> </html>
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<!DOCTYPE html> <html> <head> <style> code { font-family: Consolas,"courier new"; color: crimson; background-color: #f1f1f1; padding: 2px; font-size: 105%; } </style> </head> <body>

<h1>The code element + CSS</h1>

<p>The HTML <code>button</code> tag defines a clickable button.</p> <p>The CSS <code>background-color</code> property defines the background color of an element.</p>

</body> </html>

<!DOCTYPE html> <html> <head> <style> code { font-family: monospace; } </style> </head> <body>

<p>A code element is displayed like this:</p>

<code>A piece of computer code</code>

<p>Change the default CSS settings to see the effect.</p>

</body> </html>
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HTML <col> Tag

Example Set the background color of the three columns with the <colgroup> and <col> tags:

<table> <colgroup> <col span="2" style="background-color:red"> <col style="background-color:yellow"> </colgroup> <tr> <th>ISBN</th> <th>Title</th> <th>Price</th> </tr> <tr> <td>3476896</td> <td>My first HTML</td> <td>$53</td> </tr> </table> More "Try it Yourself" examples below.

Definition and Usage The <col> tag specifies column properties for each column within a <colgroup> element.

The <col> tag is useful for applying styles to entire columns, instead of repeating the styles for each cell, for each row.

Browser Support Element
<col> Yes Yes Yes Yes Yes Attributes Attribute Value Description span number Specifies the number of columns a <col> element should span Global Attributes The <col> tag also supports the Global Attributes in HTML.

Event Attributes The <col> tag also supports the Event Attributes in HTML.

More Examples Example Align text in table columns (with CSS):

<table style="width:100%"> <tr> <th>ISBN</th> <th>Title</th> <th>Price</th> </tr> <tr> <td>3476896</td> <td>My first HTML</td> <td style="text-align:right">$53</td> </tr> <tr> <td>2489604</td> <td>My first CSS</td> <td style="text-align:right">$47</td> </tr> </table> Example Vertical-align text in table columns (with CSS):

<table style="height:200px"> <tr> <th>Month</th> <th style="vertical-align:bottom">Savings</th> </tr> <tr> <td>January</td> <td style="vertical-align:bottom">$100</td> </tr> </table> Example Specify width of table columns (with CSS):

<table> <tr> <th style="width:130px">Month</th> <th style="width:80px">Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$80</td> </tr> </table> Related Pages HTML DOM reference: Column Object

Default CSS Settings Most browsers will display the <col> element with the following default values:

Example col { display: table-column; }




<!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid black; } </style> </head> <body>

<h1>The col element</h1>

<table> <colgroup> <col span="2" style="background-color:red"> <col style="background-color:yellow"> </colgroup> <tr> <th>ISBN</th> <th>Title</th> <th>Price</th> </tr> <tr> <td>3476896</td> <td>My first HTML</td> <td>$53</td> </tr> <tr> <td>5869207</td> <td>My first CSS</td> <td>$49</td> </tr> </table>

</body> </html>
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<!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid black; } </style> </head> <body>

<table style="width:100%"> <tr> <th>ISBN</th> <th>Title</th> <th>Price</th> </tr> <tr> <td>3476896</td> <td>My first HTML</td> <td style="text-align:right">$53</td> </tr> <tr> <td>2489604</td> <td>My first CSS</td> <td style="text-align:right">$47</td> </tr> </table>

</body> </html>
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<!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid black; } </style> </head> <body>

<table style="height:200px"> <tr> <th>Month</th> <th style="vertical-align:bottom">Savings</th> </tr> <tr> <td>January</td> <td style="vertical-align:bottom">$100</td> </tr> </table>

</body> </html>
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<!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid black; } </style> </head> <body>

<table> <tr> <th style="width:130px">Month</th> <th style="width:80px">Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$80</td> </tr> </table>

</body> </html>
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<!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid black; }

col { display: table-column; } </style> </head> <body>

<p>Look how the col element is displayed below:</p>

<table> <colgroup> <col span="2" style="background-color:red"> <col style="background-color:yellow"> </colgroup> <tr> <th>ISBN</th> <th>Title</th> <th>Price</th> </tr> <tr> <td>3476896</td> <td>My first HTML</td> <td>$53</td> </tr> <tr> <td>5869207</td> <td>My first CSS</td> <td>$49</td> </tr> </table>

<p>Change the default CSS settings to see the effect.</p>

</body> </html> 
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HTML <colgroup> Tag

Example Set the background color of the three columns with the <colgroup> and <col> tags:

<table> <colgroup> <col span="2" style="background-color:red"> <col style="background-color:yellow"> </colgroup> <tr> <th>ISBN</th> <th>Title</th> <th>Price</th> </tr> <tr> <td>3476896</td> <td>My first HTML</td> <td>$53</td> </tr> </table> More "Try it Yourself" examples below.

Definition and Usage The <colgroup> tag specifies a group of one or more columns in a table for formatting.

The <colgroup> tag is useful for applying styles to entire columns, instead of repeating the styles for each cell, for each row.

Note: The <colgroup> tag must be a child of a <table> element, after any <caption> elements and before any <thead>, <tbody>, <tfoot>, and <tr> elements.

Tip: To define different properties to a column within a <colgroup>, use the <col> tag within the <colgroup> tag.

Browser Support Element
<colgroup> Yes Yes Yes Yes Yes Attributes Attribute Value Description span number Specifies the number of columns a column group should span Global Attributes The <colgroup> tag also supports the Global Attributes in HTML.

Event Attributes The <colgroup> tag also supports the Event Attributes in HTML.

More Examples Example Align text in table columns (with CSS):

<table style="width:100%"> <tr> <th>ISBN</th> <th>Title</th> <th>Price</th> </tr> <tr> <td>3476896</td> <td>My first HTML</td> <td style="text-align:right">$53</td> </tr> <tr> <td>2489604</td> <td>My first CSS</td> <td style="text-align:right">$47</td> </tr> </table> Example Vertical-align text in table columns (with CSS):

<table style="height:200px"> <tr> <th>Month</th> <th style="vertical-align:bottom">Savings</th> </tr> <tr> <td>January</td> <td style="vertical-align:bottom">$100</td> </tr> </table> Example Specify width of a table column (with CSS):

<table> <tr> <th style="width:200px">Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$80</td> </tr> </table> Related Pages HTML DOM reference: ColumnGroup Object

Default CSS Settings Most browsers will display the <colgroup> element with the following default values:

Example colgroup { display: table-column-group; }
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<!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid black; } </style> </head> <body>

<h1>The colgroup element</h1>

<table> <colgroup> <col span="2" style="background-color:red"> <col style="background-color:yellow"> </colgroup> <tr> <th>ISBN</th> <th>Title</th> <th>Price</th> </tr> <tr> <td>3476896</td> <td>My first HTML</td> <td>$53</td> </tr> <tr> <td>5869207</td> <td>My first CSS</td> <td>$49</td> </tr> </table>

</body> </html>
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<!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid black; } </style> </head> <body>

<table style="width:100%"> <tr> <th>ISBN</th> <th>Title</th> <th>Price</th> </tr> <tr> <td>3476896</td> <td>My first HTML</td> <td style="text-align:right">$53</td> </tr> <tr> <td>2489604</td> <td>My first CSS</td> <td style="text-align:right">$47</td> </tr> </table>

</body> </html>
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<!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid black; } </style> </head> <body>

<table style="height:200px"> <tr> <th>Month</th> <th style="vertical-align:bottom">Savings</th> </tr> <tr> <td>January</td> <td style="vertical-align:bottom">$100</td> </tr> </table>

</body> </html>
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<!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid black; } </style> </head> <body>

<table> <tr> <th style="width:200px">Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$80</td> </tr> </table>

</body> </html>

oooooooooooooo

<!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid black; }

colgroup { display: table-column-group; } </style> </head> <body>

<p>Look how the colgroup element is displayed below:</p>

<table> <colgroup> <col span="2" style="background-color:red"> <col style="background-color:yellow"> </colgroup> <tr> <th>ISBN</th> <th>Title</th> <th>Price</th> </tr> <tr> <td>3476896</td> <td>My first HTML</td> <td>$53</td> </tr> <tr> <td>5869207</td> <td>My first CSS</td> <td>$49</td> </tr> </table>

<p>Change the default CSS settings to see the effect.</p>

</body> </html>
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HTML <data> Tag

Example The following example displays product names but also associates each name with a product number:

<ul> <li><data value="21053">Cherry Tomato</data></li> <li><data value="21054">Beef Tomato</data></li> <li><data value="21055">Snack Tomato</data></li> </ul> Definition and Usage The <data> tag is used to add a machine-readable translation of a given content.

This element provides both a machine-readable value for data processors, and a human-readable value for rendering in a browser.

Tip: If the content is time- or date-related, use the <time> element instead.

Browser Support Element
<data> 62.0 13.0 22.0 Not supported 49.0 Attributes Attribute Value Description value machine-readable format Specifies the machine-readable translation of the content of the element Global Attributes The <data> tag also supports the Global Attributes in HTML.
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<!DOCTYPE html> <html> <body>

<h1>The data element</h1>

<p>The following example displays product names but also associates each name with a product number:</p>

<ul> <li><data value="21053">Cherry Tomato</data></li> <li><data value="21054">Beef Tomato</data></li> <li><data value="21055">Snack Tomato</data></li> </ul>

</body> </html>
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HTML <datalist> Tag

Example A datalist with pre-defined options (connected to an <input> element):

<label for="browser">Choose your browser from the list:</label> <input list="browsers" name="browser" id="browser">

<datalist id="browsers"> <option value="Edge"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist> Definition and Usage The <datalist> tag specifies a list of pre-defined options for an <input> element.

The <datalist> tag is used to provide an "autocomplete" feature for <input> elements. Users will see a drop-down list of pre-defined options as they input data.

The <datalist> element's id attribute must be equal to the <input> element's list attribute (this binds them together).

Browser Support The numbers in the table specify the first browser version that fully supports the element.

Element
<datalist> 20.0 10.0 4.0 12.1 9.5 Global Attributes The <datalist> tag also supports the Global Attributes in HTML.

Event Attributes The <datalist> tag also supports the Event Attributes in HTML.

Related Pages HTML DOM reference: Datalist Object

Default CSS Settings Most browsers will display the <datalist> element with the following default values:

datalist { display: none; }
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<!DOCTYPE html> <html> <body>

<h1>The datalist element</h1>

<form action="/action_page.php" method="get"> <label for="browser">Choose your browser from the list:</label> <input list="browsers" name="browser" id="browser"> <datalist id="browsers"> <option value="Edge"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist> <input type="submit"> </form>

<p><strong>Note:</strong> The datalist tag is not supported in Safari 12.0 (or earlier).</p>

</body> </html>
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HTML <dd> Tag

Example A description list, with terms and descriptions:

<dl> <dt>Coffee</dt> <dd>Black hot drink</dd> <dt>Milk</dt> <dd>White cold drink</dd> </dl> Definition and Usage The <dd> tag is used to describe a term/name in a description list.

The <dd> tag is used in conjunction with <dl> (defines a description list) and <dt> (defines terms/names).

Inside a <dd> tag you can put paragraphs, line breaks, images, links, lists, etc.

Browser Support Element
<dd> Yes Yes Yes Yes Yes Global Attributes The <dd> tag also supports the Global Attributes in HTML.

Event Attributes The <dd> tag also supports the Event Attributes in HTML.

Related Pages HTML tutorial: HTML Lists

HTML DOM reference: DD Object

Default CSS Settings Most browsers will display the <dd> element with the following default values:

Example dd { display: block; margin-left: 40px; }
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<!DOCTYPE html> <html> <body>

<h1>The dl, dd, and dt elements</h1>

<p>These three elements are used to create a description list:</p>

<dl> <dt>Coffee</dt> <dd>Black hot drink</dd> <dt>Milk</dt> <dd>White cold drink</dd> </dl>

</body> </html>

<!DOCTYPE html> <html> <head> <style> dd { display: block; margin-left: 40px; } </style> </head> <body>

<p>A dd element is displayed like this:</p>

<dl> <dt>Coffee</dt> <dd>Black hot drink</dd> <dt>Milk</dt> <dd>White cold drink</dd> </dl>

<p>Change the default CSS settings to see the effect.</p>

</body> </html>
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HTML <del> Tag

Example A text with a deleted part, and a new, inserted part:

<p>My favorite color is <del>blue</del> <ins>red</ins>!</p> More "Try it Yourself" examples below.

Definition and Usage The <del> tag defines text that has been deleted from a document. Browsers will usually strike a line through deleted text.

Tips and Notes Tip: Also look at the <ins> tag to markup inserted text.

Browser Support Element
<del> Yes Yes Yes Yes Yes Attributes Attribute Value Description cite URL Specifies a URL to a document that explains the reason why the text was deleted/changed datetime YYYY-MM-DDThh:mm:ssTZD Specifies the date and time of when the text was deleted/changed Global Attributes The <del> tag also supports the Global Attributes in HTML.

Event Attributes The <del> tag also supports the Event Attributes in HTML.

More Examples Example Use CSS to style <del> and <ins>:

<html> <head> <style> del {background-color: tomato;} ins {background-color: yellow;} </style> </head> <body>

<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>

</body> </html> Related Pages HTML DOM reference: Del Object

Default CSS Settings Most browsers will display the <del> element with the following default values:

Example del { text-decoration: line-through; }




<!DOCTYPE html> <html> <body>

<h1>The del element</h1>

<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>

</body> </html>

<!DOCTYPE html> <html> <head> <style> del {background-color: tomato;} ins {background-color: yellow;} </style> </head> <body>

<h1>The del and ins elements + CSS</h1>

<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>

</body> </html>

<!DOCTYPE html> <html> <head> <style> del { text-decoration: line-through; } </style> </head> <body>

<p>A del element is displayed like this:</p>

<p><del>Some deleted text.</del></p>

<p>Change the default CSS settings to see the effect.</p>

</body> </html>
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HTML <details> Tag

Example Specify details that the user can open and close on demand:

<details> <summary>Epcot Center</summary> <p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p> </details> More "Try it Yourself" examples below.

Definition and Usage The <details> tag specifies additional details that the user can open and close on demand.

The <details> tag is often used to create an interactive widget that the user can open and close. By default, the widget is closed. When open, it expands, and displays the content within.

Any sort of content can be put inside the <details> tag.

Tip: The <summary> tag is used in conjuction with <details> to specify a visible heading for the details.

Browser Support The numbers in the table specify the first browser version that fully supports the element.

Element
<details> 12.0 79.0 49.0 6.0 15.0 Attributes Attribute Value Description open open Specifies that the details should be visible (open) to the user Global Attributes The <details> tag also supports the Global Attributes in HTML.

Event Attributes The <details> tag also supports the Event Attributes in HTML.

More Examples Example Use CSS to style <details> and <summary>:

<html> <style> details > summary { padding: 4px; width: 200px; background-color: #eeeeee; border: none; box-shadow: 1px 1px 2px #bbbbbb; cursor: pointer; }

details > p { background-color: #eeeeee; padding: 4px; margin: 0; box-shadow: 1px 1px 2px #bbbbbb; } </style> <body>

<details> <summary>Epcot Center</summary> <p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p> </details>

</body> </html> Related Pages HTML DOM reference: Details Object

Default CSS Settings Most browsers will display the <details> element with the following default values:

details { display: block; }





ggg

<!DOCTYPE html> <html> <body>

<h1>The details element</h1>

<details> <summary>Epcot Center</summary> <p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p> </details>

</body> </html>

<!DOCTYPE html> <html> <head> <style> details > summary { padding: 4px; width: 200px; background-color: #eeeeee; border: none; box-shadow: 1px 1px 2px #bbbbbb; cursor: pointer; }

details > p { background-color: #eeeeee; padding: 4px; margin: 0; box-shadow: 1px 1px 2px #bbbbbb; } </style> </head> <body>

<h1>The details and summary elements + CSS</h1>

<details> <summary>Epcot Center</summary> <p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p> </details>

</body> </html>
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HTML <dfn> Tag

Example Mark up a term with <dfn>:

<p><dfn>HTML</dfn> is the standard markup language for creating web pages.</p> More "Try it Yourself" examples below.

Definition and Usage The <dfn> tag stands for the "definition element", and it specifies a term that is going to be defined within the content.

The nearest parent of the <dfn> tag must also contain the definition/explanation for the term.

The term inside the <dfn> tag can be any of the following:

Just as the content of the <dfn> element:
Example <p><dfn>HTML</dfn> is the standard markup language for creating web pages.</p>

Or, with the title attribute added:
Example <p><dfn title="HyperText Markup Language">HTML</dfn> is the standard markup language for creating web pages.</p>

Or, with an <abbr> tag inside the <dfn> element:
Example <p><dfn><abbr title="HyperText Markup Language">HTML</abbr></dfn> is the standard markup language for creating web pages.</p>

Or, with the id attribute added. Then, whenever a term is used, it can refer back to the definition with an <a> tag:
Example <p><dfn id="html-def">HTML</dfn> is the standard markup language for creating web pages.</p>

<p>This is some text…</p> <p>This is some text…</p> <p>Learn <a href="#html-def">HTML</a> now.</p> Browser Support Element
<dfn> Yes Yes Yes Yes Yes Global Attributes The <dfn> tag also supports the Global Attributes in HTML.

Event Attributes The <dfn> tag also supports the Event Attributes in HTML.

Related Pages HTML tutorial: HTML Quotation Elements

HTML DOM reference: DFN Object

Default CSS Settings Most browsers will display the <dfn> element with the following default values:

Example dfn { font-style: italic; }
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<!DOCTYPE html> <html> <body>

<h1>The dfn element</h1>

<p><dfn>HTML</dfn> is the standard markup language for creating web pages.</p>

</body> </html>

<!DOCTYPE html> <html> <body>

<p><dfn>HTML</dfn> is the standard markup language for creating web pages.</p>

</body> </html>

<!DOCTYPE html> <html> <body>

<p><dfn title="HyperText Markup Language">HTML</dfn> is the standard markup language for creating web pages.</p>

</body> </html>

<!DOCTYPE html> <html> <body>

<p><dfn><abbr title="HyperText Markup Language">HTML</abbr></dfn> is the standard markup language for creating web pages.</p>

</body> </html>

<!DOCTYPE html> <html> <body>

<p><dfn id="html-def">HTML</dfn> is the standard markup language for creating web pages.</p>

<p>This is some text…</p>

<p>This is some text…</p>

<p>This is some text…</p>

<p>Learn <a href="#html-def">HTML</a> now.</p>

</body> </html>

<!DOCTYPE html> <html> <head> <style> dfn { font-style: italic; } </style> </head> <body>

<p>A dfn element is displayed like this:</p>

<dfn>Definition term</dfn>

<p>Change the default CSS settings to see the effect.</p>

</body> </html>
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HTML <dialog> Tag

Example Using the <dialog> element:

<dialog open>This is an open dialog window</dialog> Definition and Usage The <dialog> tag defines a dialog box or subwindow.

The <dialog> element makes it easy to create popup dialogs and modals on a web page.

Browser Support The numbers in the table specify the first browser version that fully supports the element.

Element
<dialog> 37.0 79.0 53.0* Not supported 24.0

Not supported by default, but can be enabled in about:config (set dom.dialog_element.enabled to true).
Attributes Attribute Value Description open open Specifies that the dialog element is active and that the user can interact with it Global Attributes The <dialog> tag also supports the Global Attributes in HTML.

Event Attributes The <dialog> tag also supports the Event Attributes in HTML.

Related Pages HTML DOM reference: Dialog Object



<!DOCTYPE html> <html> <body>

<h1>The dialog element</h1>

<p>This is some text.</p>

<p>This is some text.</p>

<dialog open>This is an open dialog window</dialog>

<p>This is some text.</p>

<p>This is some text.</p>

<p><b>Note:</b> The dialog tag is not supported in Safari and Edge (prior version 79).</p>

</body> </html>
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HTML <dir> Tag Not Supported in HTML5. The <dir> tag was used in HTML 4 to list directory titles.

What to Use Instead? Example Use <ul> to create a directory list:

<ul> <li>html</li> <li>xhtml</li> <li>css</li> </ul> Example Reduce line-height in a list (with CSS):

<ul style="line-height:80%"> <li>html</li> <li>xhtml</li> <li>css</li> </ul> Tip: In our CSS tutorial you can find more details about styling lists.





<!DOCTYPE html> <html> <body>

<ul> <li>html</li> <li>xhtml</li> <li>css</li> </ul>

</body> </html>

<!DOCTYPE html> <html> <body>

<ul style="line-height:80%"> <li>html</li> <li>xhtml</li> <li>css</li> </ul>

</body> </html>
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HTML <div> Tag

Example A <div> section in a document that is styled with CSS:

<html> <head> <style> .myDiv { border: 5px outset red; background-color: lightblue; text-align: center; } </style> </head> <body>

<div class="myDiv"> <h2>This is a heading in a div element</h2> <p>This is some text in a div element.</p> </div>

</body> </html> More "Try it Yourself" examples below.

Definition and Usage The <div> tag defines a division or a section in an HTML document.

The <div> tag is used as a container for HTML elements - which is then styled with CSS or manipulated with JavaScript.

The <div> tag is easily styled by using the class or id attribute.

Any sort of content can be put inside the <div> tag!

Note: By default, browsers always place a line break before and after the <div> element.

Browser Support Element
<div> Yes Yes Yes Yes Yes Global Attributes The <div> tag also supports the Global Attributes in HTML.

Event Attributes The <div> tag also supports the Event Attributes in HTML.

Related Pages HTML tutorial: HTML Block and Inline Elements

HTML tutorial: HTML Layout

HTML DOM reference: Div Object

Default CSS Settings Most browsers will display the <div> element with the following default values:

Example div { display: block; }




<!DOCTYPE html> <html> <head> <style> .myDiv { border: 5px outset red; background-color: lightblue;
text-align: center; } </style> </head> <body>

<h1>The div element</h1>

<div class="myDiv"> <h2>This is a heading in a div element</h2> <p>This is some text in a div element.</p> </div>

<p>This is some text outside the div element.</p>

</body> </html>

<!DOCTYPE html> <html> <html> <head> <style> div { display: block; } </style> </head> <body>

A div element is displayed like this:

<div>This is some text in a div element.</div>

Change the default CSS settings to see the effect.

</body> </html>
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HTML <dl> Tag

Example A description list, with terms and descriptions:

<dl> <dt>Coffee</dt> <dd>Black hot drink</dd> <dt>Milk</dt> <dd>White cold drink</dd> </dl> Definition and Usage The <dl> tag defines a description list.

The <dl> tag is used in conjunction with <dt> (defines terms/names) and <dd> (describes each term/name).

Browser Support Element
<dl> Yes Yes Yes Yes Yes Global Attributes The <dl> tag also supports the Global Attributes in HTML.

Event Attributes The <dl> tag also supports the Event Attributes in HTML.

Related Pages HTML tutorial: HTML Lists

HTML DOM reference: DList Object

Default CSS Settings Most browsers will display the <dl> element with the following default values:

Example dl { display: block; margin-top: 1em; margin-bottom: 1em; margin-left: 0; margin-right: 0; }





<!DOCTYPE html> <html> <body>

<h1>The dl, dd, and dt elements</h1>

<p>These three elements are used to create a description list:</p>

<dl> <dt>Coffee</dt> <dd>Black hot drink</dd> <dt>Milk</dt> <dd>White cold drink</dd> </dl>

</body> </html>

<!DOCTYPE html> <html> <head> <style> dl { display: block; margin-top: 1em; margin-bottom: 1em; margin-left: 0; margin-right: 0; } </style> </head> <body>

<p>A dl element is displayed like this:</p>

<dl> <dt>Coffee</dt> <dd>Black hot drink</dd> <dt>Milk</dt> <dd>White cold drink</dd> </dl>

<p>Change the default CSS settings to see the effect.</p>

</body> </html>
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HTML <dt> Tag

Example A description list, with terms and descriptions:

<dl> <dt>Coffee</dt> <dd>Black hot drink</dd> <dt>Milk</dt> <dd>White cold drink</dd> </dl> Definition and Usage The <dt> tag defines a term/name in a description list.

The <dt> tag is used in conjunction with <dl> (defines a description list) and <dd> (describes each term/name).

Browser Support Element
<dt> Yes Yes Yes Yes Yes Global Attributes The <dt> tag also supports the Global Attributes in HTML.

Event Attributes The <dt> tag also supports the Event Attributes in HTML.

Related Pages HTML tutorial: HTML Lists

HTML DOM reference: DT Object

Default CSS Settings Most browsers will display the <dt> element with the following default values:

Example dt { display: block; }





<!DOCTYPE html> <html> <body>

<h1>The dl, dd, and dt elements</h1>

<p>These three elements are used to create a description list:</p>

<dl> <dt>Coffee</dt> <dd>Black hot drink</dd> <dt>Milk</dt> <dd>White cold drink</dd> </dl>

</body> </html>

<!DOCTYPE html> <html> <head> <style> dt { display: block; } </style> </head> <body>

<p>A dt element is displayed like this:</p>

<dl> <dt>Coffee</dt> <dd>Black hot drink</dd> <dt>Milk</dt> <dd>White cold drink</dd> </dl>

<p>Change the default CSS settings to see the effect.</p>

</body> </html>

aaaaaaaaaaaaaaaaaaaaaaaaaqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqhhhhhhhhhhhhhyyyyyyyyyyyyyyyyyyyyyyy

https://www.w3schools.com/tags/tag_em.asp



HTML <em> Tag

Example Mark up emphasized text in a document:

<p>You <em>have</em> to hurry up!</p>

<p>We <em>cannot</em> live like this.</p> Definition and Usage The <em> tag is used to define emphasized text. The content inside is typically displayed in italic.

A screen reader will pronounce the words in <em> with an emphasis, using verbal stress.

Browser Support Element
<em> Yes Yes Yes Yes Yes Global Attributes The <em> tag also supports the Global Attributes in HTML.

Event Attributes The <em> tag also supports the Event Attributes in HTML.

Related Pages HTML tutorial: HTML Text Formatting

HTML DOM reference: Emphasized Object

Default CSS Settings Most browsers will display the <em> element with the following default values:

Example em { font-style: italic; }



<!DOCTYPE html> <html> <body>

<h1>The em element</h1>

<p>You <em>have</em> to hurry up!</p>

<p>We <em>cannot</em> live like this.</p>

</body> </html>

<!DOCTYPE html> <html> <head> <style> em { font-style: italic; } </style> </head> <body>

<p>An em element is displayed like this:</p>

<em>Some emphasized text</em>

<p>Change the default CSS settings to see the effect.</p>

</body> </html>
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HTML <embed> Tag

Example An embedded image:

<embed type="image/jpg" src="pic_trulli.jpg" width="300" height="200"> Example An embedded HTML page:

<embed type="text/html" src="snippet.html" width="500" height="200"> Example An embedded video:

<embed type="video/webm" src="video.mp4" width="400" height="300"> Definition and Usage The <embed> tag defines a container for an external resource, such as a web page, a picture, a media player, or a plug-in application.

Warning Most browsers no longer support Java Applets and Plug-ins.

ActiveX controls are no longer supported in any browsers.

The support for Shockwave Flash has also been turned off in modern browsers.

Suggestion To display a picture, it is better to use the <img> tag.

To display HTML, it is better to use the <iframe> tag.

To display video or audio, it is better to use the <video> and <audio> tags.

Browser Support Element
<embed> Yes Yes Yes Yes Yes Attributes Attribute Value Description height pixels Specifies the height of the embedded content src URL Specifies the address of the external file to embed type media_type Specifies the media type of the embedded content width pixels Specifies the width of the embedded content Global Attributes The <embed> tag also supports the Global Attributes in HTML.

Event Attributes The <embed> tag also supports the Event Attributes in HTML.

Related Pages HTML DOM reference: Embed Object

Default CSS Settings Most browsers will display the <embed> element with the following default values:

embed:focus { outline: none; }




<!DOCTYPE html> <html> <body>

<h1>The embed element</h1>

<embed type="image/jpg" src="pic_trulli.jpg" width="300" height="200">

</body> </html>

<!DOCTYPE html> <html> <body>

<h1>The embed element</h1>

<embed type="text/html" src="snippet.html" width="500" height="200">

</body> </html>

<!DOCTYPE html> <html> <body>

<embed type="video/webm" src="movie.mp4" width="400" height="300">

</body> </html>
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w3schools.comLOG INTHE WORLD'S LARGEST WEB DEVELOPER SITE HTML Reference HTML by Alphabet HTML by Category HTML Browser Support HTML Attributes HTML Global Attributes HTML Events HTML Colors HTML Canvas HTML Audio/Video HTML Character Sets HTML Doctypes HTML URL Encode HTML Language Codes HTML Country Codes HTTP Messages HTTP Methods PX to EM Converter Keyboard Shortcuts

HTML Tags <!--> <!DOCTYPE> <a> <abbr> <acronym> <address> <applet> <area> <article> <aside> <audio> <b> <base> <basefont> <bdi> <bdo> <big> <blockquote> <body> <br> <button> <canvas> <caption> <center> <cite> <code> <col> <colgroup> <data> <datalist> <dd> <del> <details> <dfn> <dialog> <dir> <div> <dl> <dt> <em> <embed> <fieldset> <figcaption> <figure> <font> <footer> <form> <frame> <frameset> <h1> - <h6> <head> <header> <hr> <html> <i> <iframe> <img> <input> <ins> <kbd> <label> <legend> <li> <link> <main> <map> <mark> <meta> <meter> <nav> <noframes> <noscript> <object> <ol> <optgroup> <option> <output> <p> <param> <picture> <pre> <progress> <q> <rp> <rt> <ruby> <s> <samp> <script> <section> <select> <small> <source> <span> <strike> <strong> <style> <sub> <summary> <sup> <svg> <table> <tbody> <td> <template> <textarea> <tfoot> <th> <thead> <time> <title> <tr> <track> <tt> <u> <ul> <var> <video> <wbr>

HTML <fieldset> Tag

Example Group related elements in a form:

<form action="/action_page.php"> <fieldset> <legend>Personalia:</legend> <label for="fname">First name:</label> <input type="text" id="fname" name="fname"><br><br> <label for="lname">Last name:</label> <input type="text" id="lname" name="lname"><br><br> <label for="email">Email:</label> <input type="email" id="email" name="email"><br><br> <label for="birthday">Birthday:</label> <input type="date" id="birthday" name="birthday"><br><br> <input type="submit" value="Submit"> </fieldset> </form> More "Try it Yourself" examples below.

Definition and Usage The <fieldset> tag is used to group related elements in a form.

The <fieldset> tag draws a box around the related elements.

Tips and Notes Tip: The <legend> tag is used to define a caption for the <fieldset> element.

Browser Support Element
<fieldset> Yes Yes Yes Yes Yes Attributes Attribute Value Description disabled disabled Specifies that a group of related form elements should be disabled form form_id Specifies which form the fieldset belongs to name text Specifies a name for the fieldset Global Attributes The <fieldset> tag also supports the Global Attributes in HTML.

Event Attributes The <fieldset> tag also supports the Event Attributes in HTML.

More Examples Example Use CSS to style <fieldset> and <legend>:

<html> <head> <style> fieldset { background-color: #eeeeee; }

legend { background-color: gray; color: white; padding: 5px 10px; }

input { margin: 5px; } </style> </head> <body>

<form action="/action_page.php"> <fieldset> <legend>Personalia:</legend> <label for="fname">First name:</label> <input type="text" id="fname" name="fname"><br><br> <label for="lname">Last name:</label> <input type="text" id="lname" name="lname"><br><br> <label for="email">Email:</label> <input type="email" id="email" name="email"><br><br> <label for="birthday">Birthday:</label> <input type="date" id="birthday" name="birthday"><br><br> <input type="submit" value="Submit"> </fieldset> </form>

</body> </html> Related Pages HTML DOM reference: Fieldset Object

Default CSS Settings Most browsers will display the <fieldset> element with the following default values:

fieldset { display: block; margin-left: 2px; margin-right: 2px; padding-top: 0.35em; padding-bottom: 0.625em; padding-left: 0.75em; padding-right: 0.75em; border: 2px groove (internal value); }





<!DOCTYPE html> <html> <body>

<h1>The fieldset element</h1>

<form action="/action_page.php"> <fieldset> <legend>Personalia:</legend> <label for="fname">First name:</label> <input type="text" id="fname" name="fname"><br><br> <label for="lname">Last name:</label> <input type="text" id="lname" name="lname"><br><br> <label for="email">Email:</label> <input type="email" id="email" name="email"><br><br> <label for="birthday">Birthday:</label> <input type="date" id="birthday" name="birthday"><br><br> <input type="submit" value="Submit"> </fieldset> </form>

</body> </html>

<!DOCTYPE html> <html> <head> <style> fieldset { background-color: #eeeeee; }

legend { background-color: gray; color: white; padding: 5px 10px; }

input { margin: 5px; } </style> </head> <body>

<h1>The fieldset element + CSS</h1>

<form action="/action_page.php"> <fieldset> <legend>Personalia:</legend> <label for="fname">First name:</label> <input type="text" id="fname" name="fname"><br><br> <label for="lname">Last name:</label> <input type="text" id="lname" name="lname"><br><br> <label for="email">Email:</label> <input type="email" id="email" name="email"><br><br> <label for="birthday">Birthday:</label> <input type="date" id="birthday" name="birthday"><br><br> <input type="submit" value="Submit"> </fieldset> </form>

</body> </html>
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HTML <figcaption> Tag

Example Use a <figure> element to mark up a photo in a document, and a <figcaption> element to define a caption for the photo:

<figure> <img src="pic_trulli.jpg" alt="Trulli" style="width:100%"> <figcaption>Fig.1 - Trulli, Puglia, Italy.</figcaption> </figure> More "Try it Yourself" examples below.

Definition and Usage The <figcaption> tag defines a caption for a <figure> element.

The <figcaption> element can be placed as the first or last child of the <figure> element.

Browser Support The numbers in the table specify the first browser version that fully supports the element.

Element
<figcaption> 8.0 9.0 4.0 5.1 11.0 Global Attributes The <figcaption> tag also supports the Global Attributes in HTML.

Event Attributes The <figcaption> tag also supports the Event Attributes in HTML.

More Examples Example Use CSS to style <figure> and <figcaption>:

<html> <head> <style> figure { border: 1px #cccccc solid; padding: 4px; margin: auto; }

figcaption { background-color: black; color: white; font-style: italic; padding: 2px; text-align: center; } </style> </head> <body>

<figure> <img src="pic_trulli.jpg" alt="Trulli" style="width:100%"> <figcaption>Fig.1 - Trulli, Puglia, Italy</figcaption> </figure>

</body> </html> Related Pages HTML DOM reference: Figcaption Object

Default CSS Settings Most browsers will display the <figcaption> element with the following default values:

figcaption { display: block; }





<!DOCTYPE html> <html> <body>

<h1>The figure and figcaption element</h1>

<figure> <img src="pic_trulli.jpg" alt="Trulli" style="width:100%"> <figcaption>Fig.1 - Trulli, Puglia, Italy.</figcaption> </figure>

</body> </html>

<!DOCTYPE html> <html> <head> <style> figure { border: 1px #cccccc solid; padding: 4px; margin: auto; }

figcaption { background-color: black; color: white; font-style: italic; padding: 2px; text-align: center; } </style> </head> <body>

<h1>The figure and figcaption elements + CSS</h1>

<figure> <img src="pic_trulli.jpg" alt="Trulli" style="width:100%"> <figcaption>Fig.1 - Trulli, Puglia, Italy</figcaption> </figure>

</body> </html>
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HTML <figure> Tag

Example Use a <figure> element to mark up a photo in a document, and a <figcaption> element to define a caption for the photo:

<figure> <img src="pic_trulli.jpg" alt="Trulli" style="width:100%"> <figcaption>Fig.1 - Trulli, Puglia, Italy.</figcaption> </figure> More "Try it Yourself" examples below.

Definition and Usage The <figure> tag specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.

While the content of the <figure> element is related to the main flow, its position is independent of the main flow, and if removed it should not affect the flow of the document.

Tip: The <figcaption> element is used to add a caption for the <figure> element.

Browser Support The numbers in the table specify the first browser version that fully supports the element.

Element
<figure> 8.0 9.0 4.0 5.1 11.0 Global Attributes The <figure> tag also supports the Global Attributes in HTML.

Event Attributes The <figure> tag also supports the Event Attributes in HTML.

More Examples Example Use CSS to style <figure> and <figcaption>:

<html> <head> <style> figure { border: 1px #cccccc solid; padding: 4px; margin: auto; }

figcaption { background-color: black; color: white; font-style: italic; padding: 2px; text-align: center; } </style> </head> <body>

<figure> <img src="pic_trulli.jpg" alt="Trulli" style="width:100%"> <figcaption>Fig.1 - Trulli, Puglia, Italy</figcaption> </figure>

</body> </html> Related Pages HTML DOM reference: Figure Object

Default CSS Settings Most browsers will display the <figure> element with the following default values:

Example figure { display: block; margin-top: 1em; margin-bottom: 1em; margin-left: 40px; margin-right: 40px; }




<!DOCTYPE html> <html> <body>

<h1>The figure and figcaption element</h1>

<figure> <img src="pic_trulli.jpg" alt="Trulli" style="width:100%"> <figcaption>Fig.1 - Trulli, Puglia, Italy.</figcaption> </figure>

</body> </html>

<!DOCTYPE html> <html> <head> <style> figure { border: 1px #cccccc solid; padding: 4px; margin: auto; }

figcaption { background-color: black; color: white; font-style: italic; padding: 2px; text-align: center; } </style> </head> <body>

<h1>The figure and figcaption elements + CSS</h1>

<figure> <img src="pic_trulli.jpg" alt="Trulli" style="width:100%"> <figcaption>Fig.1 - Trulli, Puglia, Italy</figcaption> </figure>

</body> </html>

<!DOCTYPE html> <html> <head> <style> figure { display: block; margin-top: 1em; margin-bottom: 1em; margin-left: 40px; margin-right: 40px; } </style> </head> <body>

<p>A figure element is displayed like this:</p>

<figure> <img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228"> </figure>

<p>Change the default CSS settings to see the effect.</p>

</body> </html>
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HTML <font> Tag Not Supported in HTML5. The <font> tag was used in HTML 4 to specify the font face, font size, and color of text.

What to Use Instead? Example Set the color of text (with CSS):

<p style="color:red">This is a paragraph.</p> <p style="color:blue">This is another paragraph.</p> Example Set the font of text (with CSS):

<p style="font-family:verdana">This is a paragraph.</p> <p style="font-family:'Courier New'">This is another paragraph.</p> Example Set the size of text (with CSS):

<p style="font-size:30px">This is a paragraph.</p> <p style="font-size:11px">This is another paragraph.</p> In our CSS tutorial you can find more information about CSS Text and CSS Fonts.



<!DOCTYPE html> <html> <body>

<p style="color:red">This is a paragraph.</p> <p style="color:blue">This is another paragraph.</p>

</body> </html>

<!DOCTYPE html> <html> <body>

<p style="font-family:verdana">This is a paragraph.</p> <p style="font-family:'Courier New'">This is another paragraph.</p>

</body> </html>

<!DOCTYPE html> <html> <body>

<p style="font-size:30px">This is a paragraph.</p> <p style="font-size:11px">This is another paragraph.</p>

</body> </html>
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HTML <footer> Tag

Example A footer section in a document:

<footer> <p>Author: Hege Refsnes</p> <p><a href="mailto:hege@example.com">hege@example.com</a></p> </footer> More "Try it Yourself" examples below.

Definition and Usage The <footer> tag defines a footer for a document or section.

A <footer> element typically contains:

authorship information copyright information contact information sitemap back to top links related documents You can have several <footer> elements in one document.

Tips and Notes Tip: Contact information inside a <footer> element should go inside an <address> tag.

Browser Support The numbers in the table specify the first browser version that fully supports the element.

Element
<footer> 5.0 9.0 4.0 5.0 11.1 Global Attributes The <footer> tag also supports the Global Attributes in HTML.

Event Attributes The <footer> tag also supports the Event Attributes in HTML.

More Examples Example Use CSS to style <footer>:

<html> <head> <style> footer { text-align: center; padding: 3px; background-color: DarkSalmon; color: white; } </style> </head> <body>

<footer> <p>Author: Hege Refsnes<br> <a href="mailto:hege@example.com">hege@example.com</a></p> </footer>

</body> </html> Related Pages HTML DOM reference: Footer Object

Default CSS Settings Most browsers will display the <footer> element with the following default values:

footer { display: block; }




<!DOCTYPE html> <html> <body>

<h1>The footer element</h1>

<footer> <p>Author: Hege Refsnes<br> <a href="mailto:hege@example.com">hege@example.com</a></p> </footer>

</body> </html>

<!DOCTYPE html> <html> <head> <style> .all-browsers { margin: 0; padding: 5px; background-color: lightgray; }

.all-browsers > h1, .browser { margin: 10px; padding: 5px; }

.browser { background: white; }

.browser > h2, p { margin: 4px; font-size: 90%; }

footer { text-align: center; padding: 3px; background-color: DarkSalmon; color: white; } </style> </head> <body>

<h1>The article and footer elements + CSS</h1>

<article class="all-browsers"> <h1>Most Popular Browsers</h1> <article class="browser"> <h2>Google Chrome</h2> <p>Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser today!</p> </article> <article class="browser"> <h2>Mozilla Firefox</h2> <p>Mozilla Firefox is an open-source web browser developed by Mozilla. Firefox has been the second most popular web browser since January, 2018.</p> </article> <article class="browser"> <h2>Microsoft Edge</h2> <p>Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge replaced Internet Explorer.</p> </article> </article>

<footer> <p>Author: Hege Refsnes<br> <a href="mailto:hege@example.com">hege@example.com</a></p> </footer>

</body> </html>
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HTML <form> Tag

Example An HTML form with two input fields and one submit button:

<form action="/action_page.php" method="get"> <label for="fname">First name:</label> <input type="text" id="fname" name="fname"><br><br> <label for="lname">Last name:</label> <input type="text" id="lname" name="lname"><br><br> <input type="submit" value="Submit"> </form> More "Try it Yourself" examples below.

Definition and Usage The <form> tag is used to create an HTML form for user input.

The <form> element can contain one or more of the following form elements:

<input> <textarea> <button> <select> <option> <optgroup> <fieldset> <label> <output> Browser Support Element
<form> Yes Yes Yes Yes Yes Attributes Attribute Value Description accept-charset character_set Specifies the character encodings that are to be used for the form submission action URL Specifies where to send the form-data when a form is submitted autocomplete on off Specifies whether a form should have autocomplete on or off enctype application/x-www-form-urlencoded multipart/form-data text/plain Specifies how the form-data should be encoded when submitting it to the server (only for method="post") method get post Specifies the HTTP method to use when sending form-data name text Specifies the name of a form novalidate novalidate Specifies that the form should not be validated when submitted rel external help license next nofollow noopener noreferrer opener prev search Specifies the relationship between a linked resource and the current document target _blank _self _parent _top Specifies where to display the response that is received after submitting the form Global Attributes The <form> tag also supports the Global Attributes in HTML.

Event Attributes The <form> tag also supports the Event Attributes in HTML.

More Examples Example An HTML form with checkboxes:

<form action="/action_page.php" method="get"> <input type="checkbox" name="vehicle1" value="Bike"> <label for="vehicle1"> I have a bike</label><br> <input type="checkbox" name="vehicle2" value="Car"> <label for="vehicle2"> I have a car</label><br> <input type="checkbox" name="vehicle3" value="Boat" checked> <label for="vehicle3"> I have a boat</label><br><br> <input type="submit" value="Submit"> </form> Example An HTML form with radiobuttons:

<form action="/action_page.php" method="get"> <input type="radio" id="male" name="gender" value="male"> <label for="male">Male</label><br> <input type="radio" id="female" name="gender" value="female" checked="checked"> <label for="female">Female</label><br> <input type="radio" id="other" name="gender" value="other"> <label for="other">Other</label><br><br> <input type="submit" value="Submit"> </form> Related Pages HTML tutorial: HTML Forms and Input

HTML DOM reference: Form Object

CSS Tutorial: Styling Forms

Default CSS Settings Most browsers will display the <form> element with the following default values:

Example form { display: block; margin-top: 0em; }




<!DOCTYPE html> <html> <body>

<h1>The form element</h1>

<form action="/action_page.php"> <label for="fname">First name:</label> <input type="text" id="fname" name="fname"><br><br> <label for="lname">Last name:</label> <input type="text" id="lname" name="lname"><br><br> <input type="submit" value="Submit"> </form>

<p>Click the "Submit" button and the form-data will be sent to a page on the server called "action_page.php".</p>

</body> </html>

<!DOCTYPE html> <html> <body>

<h1>Form with checkboxes</h1>

<form action="/action_page.php" method="get"> <input type="checkbox" name="vehicle1" value="Bike"> <label for="vehicle1"> I have a bike</label><br> <input type="checkbox" name="vehicle2" value="Car"> <label for="vehicle2"> I have a car</label><br> <input type="checkbox" name="vehicle3" value="Boat" checked> <label for="vehicle3"> I have a boat</label><br><br> <input type="submit" value="Submit"> </form>

</body> </html>

<!DOCTYPE html> <html> <body>

<h1>Form with radio buttons</h1>

<form action="/action_page.php" method="get"> <input type="radio" id="male" name="gender" value="male"> <label for="male">Male</label><br> <input type="radio" id="female" name="gender" value="female" checked="checked"> <label for="female">Female</label><br> <input type="radio" id="other" name="gender" value="other"> <label for="other">Other</label><br><br> <input type="submit" value="Submit"> </form>

</body> </html>

<!DOCTYPE html> <html> <head> <style> form { display: block; margin-top: 0em; } </style> </head> <body>

<p>A form element is displayed like this:</p>

<form action="/action_page.php"> <label for="fname">First name:</label> <input type="text" id="fname" name="fname" value="Mickey"><br> <label for="lname">Last name:</label> <input type="text" id="lname" name="lname" value="Mouse"><br> <input type="submit" value="Submit"> </form>

<p>Change the default CSS settings to see the effect.</p>

</body> </html>
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HTML <frame> Tag Not Supported in HTML5. The <frame> tag was used in HTML 4 to define one particular window (frame) within a <frameset>.

What to Use Instead? Example Use the <iframe> tag to embed another document within the current HTML document:

<iframe src="https://www.w3schools.com"></iframe>






aaaaaaaaaaa

<!DOCTYPE html> <html> <body>

<h1>The iframe element</h1>

<iframe src="https://www.w3schools.com" title="W3Schools Free Online Web Tutorials"> </iframe>

</body> </html>
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HTML <frameset> Tag Not Supported in HTML5. The <frameset> tag was used in HTML 4 to define a frameset.

What to Use Instead? Example Use the <iframe> tag to embed another document within the current HTML document:

<iframe src="https://www.w3schools.com"></iframe>




<!DOCTYPE html> <html> <body>

<h1>The iframe element</h1>

<iframe src="https://www.w3schools.com" title="W3Schools Free Online Web Tutorials"> </iframe>

</body> </html>
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HTML <h1> to <h6> Tags

Example The six different HTML headings:

<h1>This is heading 1</h1> <h2>This is heading 2</h2> <h3>This is heading 3</h3> <h4>This is heading 4</h4> <h5>This is heading 5</h5> <h6>This is heading 6</h6> More "Try it Yourself" examples below.

Definition and Usage The <h1> to <h6> tags are used to define HTML headings.

<h1> defines the most important heading. <h6> defines the least important heading.

Note: Only use one <h1> per page - this should represent the main heading/subject for the whole page. Also, do not skip heading levels - start with <h1>, then use <h2>, and so on.

Browser Support Element
<h1> - <h6> Yes Yes Yes Yes Yes Global Attributes The <h1> to <h6> tags also supports the Global Attributes in HTML.

Event Attributes The <h1> to <h6> tags also supports the Event Attributes in HTML.

More Examples Example Set the background color and text color of headings (with CSS):

<h1 style="background-color:DodgerBlue;">Hello World</h1> <h2 style="color:Tomato;">Hello World</h2> Example Set the alignment of headings (with CSS):

<h1 style="text-align:center">This is heading 1</h1> <h2 style="text-align:left">This is heading 2</h2> <h3 style="text-align:right">This is heading 3</h3> <h4 style="text-align:justify">This is heading 4</h4> Related Pages HTML tutorial: HTML Headings

HTML DOM reference: Heading Object

Default CSS Settings Most browsers will display the <h1> element with the following default values:

Example h1 { display: block; font-size: 2em; margin-top: 0.67em; margin-bottom: 0.67em; margin-left: 0; margin-right: 0; font-weight: bold; } Most browsers will display the <h2> element with the following default values:

Example h2 { display: block; font-size: 1.5em; margin-top: 0.83em; margin-bottom: 0.83em; margin-left: 0; margin-right: 0; font-weight: bold; } Most browsers will display the <h3> element with the following default values:

Example h3 { display: block; font-size: 1.17em; margin-top: 1em; margin-bottom: 1em; margin-left: 0; margin-right: 0; font-weight: bold; } Most browsers will display the <h4> element with the following default values:

Example h4 { display: block; font-size: 1em; margin-top: 1.33em; margin-bottom: 1.33em; margin-left: 0; margin-right: 0; font-weight: bold; } Most browsers will display the <h5> element with the following default values:

Example h5 { display: block; font-size: .83em; margin-top: 1.67em; margin-bottom: 1.67em; margin-left: 0; margin-right: 0; font-weight: bold; } Most browsers will display the <h6> element with the following default values:

Example h6 { display: block; font-size: .67em; margin-top: 2.33em; margin-bottom: 2.33em; margin-left: 0; margin-right: 0; font-weight: bold; }




<!DOCTYPE html> <html> <body>

<h1 style="background-color:DodgerBlue;">Hello World</h1> <h2 style="color:Tomato;">Hello World</h2>

</body> </html>

<!DOCTYPE html> <html> <body>

<h1>This is heading 1</h1> <h2>This is heading 2</h2> <h3>This is heading 3</h3> <h4>This is heading 4</h4> <h5>This is heading 5</h5> <h6>This is heading 6</h6>

<p><b>Tip:</b> Use h1 to h6 elements only for headings. Do not use them just to make text bold or big. Use other tags for that.</p>

</body> </html>

<!DOCTYPE html> <html> <body>

<h1 style="text-align:center">This is heading 1</h1> <h2 style="text-align:left">This is heading 2</h2> <h3 style="text-align:right">This is heading 3</h3> <h4 style="text-align:justify">This is heading 4</h4>

</body> </html>

<!DOCTYPE html> <html> <head> <style> h1 { display: block; font-size: 2em; margin-top: 0.67em; margin-bottom: 0.67em; margin-left: 0; margin-right: 0; font-weight: bold; } </style> </head> <body>

<p>An h1 element is displayed like this:</p>

<h1>This is heading 1</h1>

<p>Change the default CSS settings to see the effect.</p>

</body> </html>

<!DOCTYPE html> <html> <head> <style> h2 { display: block; font-size: 1.5em; margin-top: 0.83em; margin-bottom: 0.83em; margin-left: 0; margin-right: 0; font-weight: bold; } </style> </head> <body>

<p>An h2 element is displayed like this:</p>

<h2>This is heading 2</h2>

<p>Change the default CSS settings to see the effect.</p>

</body> </html>

<!DOCTYPE html> <html> <head> <style> h3 { display: block; font-size: 1.17em; margin-top: 1em; margin-bottom: 1em; margin-left: 0; margin-right: 0; font-weight: bold; } </style> </head> <body>

<p>An h3 element is displayed like this:</p>

<h3>This is heading 3</h3>

<p>Change the default CSS settings to see the effect.</p>

</body> </html>

<!DOCTYPE html> <html> <head> <style> h4 { display: block; font-size: 1em; margin-top: 1.33em; margin-bottom: 1.33em; margin-left: 0; margin-right: 0; font-weight: bold; } </style> </head> <body>

<p>An h4 element is displayed like this:</p>

<h4>This is heading 4</h4>

<p>Change the default CSS settings to see the effect.</p>

</body> </html>

<!DOCTYPE html> <html> <head> <style> h5 { display: block; font-size: .83em; margin-top: 1.67em; margin-bottom: 1.67em; margin-left: 0; margin-right: 0; font-weight: bold; } </style> </head> <body>

<p>An h5 element is displayed like this:</p>

<h5>This is heading 5</h5>

<p>Change the default CSS settings to see the effect.</p>

</body> </html>

<!DOCTYPE html> <html> <head> <style> h6 { display: block; font-size: .67em; margin-top: 2.33em; margin-bottom: 2.33em; margin-left: 0; margin-right: 0; font-weight: bold; } </style> </head> <body>

<p>An h6 element is displayed like this:</p>

<h6>This is heading 6</h6>

<p>Change the default CSS settings to see the effect.</p>

</body> </html>
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HTML <head> Tag

Example A simple HTML document, with a <title> tag inside the head section:

<!DOCTYPE html> <html lang="en"> <head> <title>Title of the document</title> </head> <body>

<h1>This is a heading</h1> <p>This is a paragraph.</p>

</body> </html> More "Try it Yourself" examples below.

Definition and Usage The <head> element is a container for metadata (data about data) and is placed between the <html> tag and the <body> tag.

Metadata is data about the HTML document. Metadata is not displayed.

Metadata typically define the document title, character set, styles, scripts, and other meta information.

The following elements can go inside the <head> element:

<title> (required in every HTML document) <style> <base> <link> <meta> <script> <noscript> Browser Support Element
<head> Yes Yes Yes Yes Yes Global Attributes The <head> tag also supports the Global Attributes in HTML.

More Examples Example The <base> tag (specifies a default URL and target for all links on a page) goes inside <head>:

<html> <head> <base href="https://www.w3schools.com/" target="_blank"> </head> <body>

<img src="images/stickman.gif" width="24" height="39" alt="Stickman"> <a href="tags/tag_base.asp">HTML base Tag</a>

</body> </html> Example The <style> tag (adds style information to a page) goes inside <head>:

<html> <head> <style> h1 {color:red;} p {color:blue;} </style> </head> <body>

<h1>A heading</h1> <p>A paragraph.</p>

</body> </html> Example The <link> tag (links to an external style sheet) goes inside <head>:

<html> <head> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body>

<h1>I am formatted with a linked style sheet</h1> <p>Me too!</p>

</body> </html> Related Pages HTML tutorial: HTML Head

HTML DOM reference: Head Object

Default CSS Settings Most browsers will display the <head> element with the following default values:

head { display: none; }




<!DOCTYPE html> <html lang="en"> <head> <title>Title of the document</title> </head> <body>

<h1>This is a heading</h1> <p>This is a paragraph.</p>

</body> </html>

<!DOCTYPE html> <html> <head> <base href="https://www.w3schools.com/" target="_blank"> </head> <body>

<h1>The base element</h1>

<p><img src="images/stickman.gif" width="24" height="39" alt="Stickman"> - Notice that we have only specified a relative address for the image. Since we have specified a base URL in the head section, the browser will look for the image at "https://www.w3schools.com/images/stickman.gif".</p>

<p><a href="tags/tagbase.asp">HTML base tag</a> - Notice that the link opens in a new window, even if it has no target="blank" attribute. This is because the target attribute of the base element is set to "_blank".</p>

</body> </html>

<!DOCTYPE html> <html> <head> <style> h1 {color:red;} p {color:blue;} </style> </head> <body>

<h1>This is a heading</h1> <p>This is a paragraph.</p>

</body> </html>

<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="styles.css"> </head> <body>

<h1>Hello World!</h1>

<h2>I am formatted with a linked style sheet.</h2>

<p>Me too!</p>

</body> </html>
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HTML <header> Tag

Example A header for an <article>:

<article> <header> <h1>A heading here</h1> <p>Posted by John Doe</p> <p>Some additional information here</p> </header> <p>Lorem Ipsum dolor set amet….</p> </article> More "Try it Yourself" examples below.

Definition and Usage The <header> element represents a container for introductory content or a set of navigational links.

A <header> element typically contains:

one or more heading elements (<h1> - <h6>) logo or icon authorship information Note: You can have several <header> elements in one HTML document. However, <header> cannot be placed within a <footer>, <address> or another <header> element.

Browser Support The numbers in the table specify the first browser version that fully supports the element.

Element
<header> 5.0 9.0 4.0 5.0 11.1 Global Attributes The <header> tag also supports the Global Attributes in HTML.

Event Attributes The <header> tag also supports the Event Attributes in HTML.

More Examples Example A page header:

<header> <h1>Main page heading here</h1> <p>Posted by John Doe</p> </header> Related Pages HTML DOM reference: Header Object

Default CSS Settings Most browsers will display the <header> element with the following default values:

header { display: block; }




<!DOCTYPE html> <html> <body>

<article> <header>     <h1>A heading here</h1> <p>Posted by John Doe</p> <p>Some additional information here</p> </header> <p>Lorem Ipsum dolor set amet….</p> </article>

</body> </html>

<!DOCTYPE html> <html> <body>

<header>   <h1>Main page heading here</h1> <p>Posted by John Doe</p> </header>

</body> </html>
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HTML <hr> Tag

Example Use the <hr> tag to define thematic changes in the content:

<h1>The Main Languages of the Web</h1>

<p>HTML is the standard markup language for creating Web pages. HTML describes the structure of a Web page, and consists of a series of elements. HTML elements tell the browser how to display the content.</p>

<hr>

<p>CSS is a language that describes how HTML elements are to be displayed on screen, paper, or in other media. CSS saves a lot of work, because it can control the layout of multiple web pages all at once.</p>

<hr>

<p>JavaScript is the programming language of HTML and the Web. JavaScript can change HTML content and attribute values. JavaScript can change CSS. JavaScript can hide and show HTML elements, and more.</p> More "Try it Yourself" examples below.

Definition and Usage The <hr> tag defines a thematic break in an HTML page (e.g. a shift of topic).

The <hr> element is most often displayed as a horizontal rule that is used to separate content (or define a change) in an HTML page.

Browser Support Element
<hr> Yes Yes Yes Yes Yes Global Attributes The <hr> tag also supports the Global Attributes in HTML.

Event Attributes The <hr> tag also supports the Event Attributes in HTML.

More Examples Example Align a <hr> element (with CSS):

<hr style="width:50%;text-align:left;margin-left:0"> Example A noshaded <hr> (with CSS):

<hr style="height:2px;border-width:0;color:gray;background-color:gray"> Example Set the height of a <hr> element (with CSS):

<hr style="height:30px"> Example Set the width of a <hr> element (with CSS):

<hr style="width:50%"> Related Pages HTML DOM reference: HR Object

Default CSS Settings Most browsers will display the <hr> element with the following default values:

Example hr { display: block; margin-top: 0.5em; margin-bottom: 0.5em; margin-left: auto; margin-right: auto; border-style: inset; border-width: 1px; }




<!DOCTYPE html> <html> <body>

<h1>The Main Languages of the Web</h1>

<p>HTML is the standard markup language for creating Web pages. HTML describes the structure of a Web page, and consists of a series of elements. HTML elements tell the browser how to display the content.</p>

<hr>

<p>CSS is a language that describes how HTML elements are to be displayed on screen, paper, or in other media. CSS saves a lot of work, because it can control the layout of multiple web pages all at once.</p>

<hr>

<p>JavaScript is the programming language of HTML and the Web. JavaScript can change HTML content and attribute values. JavaScript can change CSS. JavaScript can hide and show HTML elements, and more.</p>

</body> </html>

<!DOCTYPE html> <html> <body>

<p>This is some text. This is some text. This is some text.</p>

<hr style="width:50%;text-align:left;margin-left:0">

<p>This is some text. This is some text. This is some text.</p>

</body> </html>

<!DOCTYPE html> <html> <body>

<p>A normal horizontal line:</p> <hr>

<p>With CSS:</p> <hr style="height:2px;border-width:0;color:gray;background-color:gray">

</body> </html>

<!DOCTYPE html> <html> <body>

<p>A normal horizontal line:</p> <hr>

<p>A horizontal line with a height of 30 pixels:</p> <hr style="height:30px">

</body> </html>

<!DOCTYPE html> <html> <body>

<p>A normal horizontal line:</p> <hr>

<p>A horizontal line with a width of 50%:</p> <hr style="width:50%">

</body> </html>

<!DOCTYPE html> <html> <head> <style> hr { display: block; margin-top: 0.5em; margin-bottom: 0.5em; margin-left: auto; margin-right: auto; border-style: inset; border-width: 1px; } </style> </head> <body>

<p>A hr element is displayed like this:</p>

<hr>

<p>Change the default CSS settings to see the effect.</p>

</body> </html>
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HTML <html> Tag

Example A simple HTML document:

<!DOCTYPE html> <html lang="en"> <head> <title>Title of the document</title> </head> <body>

<h1>This is a heading</h1> <p>This is a paragraph.</p>

</body> </html> Definition and Usage The <html> tag represents the root of an HTML document.

The <html> tag is the container for all other HTML elements (except for the <!DOCTYPE> tag).

Note: You should always include the lang attribute inside the <html> tag, to declare the language of the Web page. This is meant to assist search engines and browsers.

Browser Support Element
<html> Yes Yes Yes Yes Yes Attributes Attribute Value Description xmlns http://www.w3.org/1999/xhtml Specifies the XML namespace attribute (If you need your content to conform to XHTML) Global Attributes The <html> tag also supports the Global Attributes in HTML.

Related Pages HTML tutorial: HTML Introduction

HTML DOM reference: HTML Object

Default CSS Settings Most browsers will display the <html> element with the following default values:

html { display: block; }

html:focus { outline: none; }




<!DOCTYPE html> <html lang="en"> <head> <title>Title of the document</title> </head> <body>

<h1>This is a heading</h1> <p>This is a paragraph.</p>

</body> </html>
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HTML <i> Tag

Example Mark up text that is set off from the normal prose in a document:

<p><i>Lorem ipsum</i> is the most popular filler text in history.</p>

<p>The <i>RMS Titanic</i>, a luxury steamship, sank on April 15, 1912 after striking an iceberg.</p> Definition and Usage The <i> tag defines a part of text in an alternate voice or mood. The content inside is typically displayed in italic.

The <i> tag is often used to indicate a technical term, a phrase from another language, a thought, a ship name, etc.

Use the <i> element only when there is not a more appropriate semantic element, such as:

<em> (emphasized text) <strong> (important text) <mark> (marked/highlighted text) <cite> (the title of a work) <dfn> (a definition term) Browser Support Element
<i> Yes Yes Yes Yes Yes Global Attributes The <i> tag also supports the Global Attributes in HTML.

Event Attributes The <i> tag also supports the Event Attributes in HTML.

Related Pages HTML tutorial: HTML Text Formatting

HTML DOM reference: Italic Object

Default CSS Settings Most browsers will display the <i> element with the following default values:

Example i { font-style: italic; }




<!DOCTYPE html> <html> <body>

<h1>The i element</h1>

<p><i>Lorem ipsum</i> is the most popular filler text in history.</p>

<p>The <i>RMS Titanic</i>, a luxury steamship, sank on April 15, 1912 after striking an iceberg.</p>

</body> </html>

<!DOCTYPE html> <html> <head> <style> i { font-style: italic; } </style> </head> <body>

<p>An i element is displayed like this:</p>

<i>Some italic text</i>

<p>Change the default CSS settings to see the effect.</p>

</body> </html>
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HTML <iframe> Tag

Example An inline frame is marked up as follows:

<iframe src="https://www.w3schools.com" title="W3Schools Free Online Web Tutorials"></iframe> More "Try it Yourself" examples below.

Definition and Usage The <iframe> tag specifies an inline frame.

An inline frame is used to embed another document within the current HTML document.

Tip: Use CSS to style the <iframe> (see example below).

Tip: It is a good practice to always include a title attribute for the <iframe>. This is used by screen readers to read out what the content of the <iframe> is.

Browser Support Element
<iframe> Yes Yes Yes Yes Yes Attributes Attribute Value Description allow Specifies a feature policy for the <iframe> allowfullscreen true false Set to true if the <iframe> can activate fullscreen mode by calling the requestFullscreen() method allowpaymentrequest true false Set to true if a cross-origin <iframe> should be allowed to invoke the Payment Request API height pixels Specifies the height of an <iframe>. Default height is 150 pixels loading eager lazy Specifies whether a browser should load an iframe immediately or to defer loading of iframes until some conditions are met name text Specifies the name of an <iframe> referrerpolicy no-referrer no-referrer-when-downgrade origin origin-when-cross-origin same-origin strict-origin-when-cross-origin unsafe-url Specifies which referrer information to send when fetching the iframe sandbox allow-forms allow-pointer-lock allow-popups allow-same-origin allow-scripts allow-top-navigation Enables an extra set of restrictions for the content in an <iframe> src URL Specifies the address of the document to embed in the <iframe> srcdoc HTML_code Specifies the HTML content of the page to show in the <iframe> width pixels Specifies the width of an <iframe>. Default width is 300 pixels Global Attributes The <iframe> tag also supports the Global Attributes in HTML.

Event Attributes The <iframe> tag also supports the Event Attributes in HTML.

More Examples Example Add and remove iframe borders (with CSS):

<iframe src="/default.asp" width="100%" height="300" style="border:1px solid black;"> </iframe>

<iframe src="/default.asp" width="100%" height="300" style="border:none;"> </iframe> Related Pages HTML tutorial: HTML Iframes

HTML DOM reference: IFrame Object

Default CSS Settings Most browsers will display the <iframe> element with the following default values:

iframe:focus { outline: none; }

iframe[seamless] { display: block; }




<!DOCTYPE html> <html> <body>

<h1>The iframe element</h1>

<iframe src="https://www.w3schools.com" title="W3Schools Free Online Web Tutorials"> </iframe>

</body> </html>

<!DOCTYPE html> <html> <body>

<h1>The iframe element + CSS</h1>

<p>An iframe with default borders:</p> <iframe src="/default.asp" width="100%" height="300"> </iframe>

<p>An iframe with a thin black border:</p> <iframe src="/default.asp" width="100%" height="300" style="border:1px solid black;"> </iframe>

<p>An iframe with no borders:</p> <iframe src="/default.asp" width="100%" height="300" style="border:none;"> </iframe>

</body> </html>
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HTML <img> Tag

Example How to insert an image:

<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600"> More "Try it Yourself" examples below.

Definition and Usage The <img> tag is used to embed an image in an HTML page.

Images are not technically inserted into a web page; images are linked to web pages. The <img> tag creates a holding space for the referenced image.

The <img> tag has two required attributes:

src - Specifies the path to the image alt - Specifies an alternate text for the image, if the image for some reason cannot be displayed Note: Also, always specify the width and height of an image. If width and height are not specified, the page might flicker while the image loads.

Tip: To link an image to another document, simply nest the <img> tag inside an <a> tag (see example below).

Browser Support Element
<img> Yes Yes Yes Yes Yes Attributes Attribute Value Description alt text Specifies an alternate text for an image crossorigin anonymous use-credentials Allow images from third-party sites that allow cross-origin access to be used with canvas height pixels Specifies the height of an image ismap ismap Specifies an image as a server-side image map loading eager lazy Specifies whether a browser should load an image immediately or to defer loading of images until some conditions are met longdesc URL Specifies a URL to a detailed description of an image referrerpolicy no-referrer no-referrer-when-downgrade origin origin-when-cross-origin unsafe-url Specifies which referrer information to use when fetching an image sizes sizes Specifies image sizes for different page layouts src URL Specifies the path to the image srcset URL-list Specifies a list of image files to use in different situations usemap #mapname Specifies an image as a client-side image map width pixels Specifies the width of an image Global Attributes The <img> tag also supports the Global Attributes in HTML.

Event Attributes The <img> tag also supports the Event Attributes in HTML.

More Examples Example Align image (with CSS):

<img src="smiley.gif" alt="Smiley face" width="42" height="42" style="vertical-align:bottom"> <img src="smiley.gif" alt="Smiley face" width="42" height="42" style="vertical-align:middle"> <img src="smiley.gif" alt="Smiley face" width="42" height="42" style="vertical-align:top"> <img src="smiley.gif" alt="Smiley face" width="42" height="42" style="float:right"> <img src="smiley.gif" alt="Smiley face" width="42" height="42" style="float:left"> Example Add image border (with CSS):

<img src="smiley.gif" alt="Smiley face" width="42" height="42" style="border:5px solid black"> Example Add left and right margins to image (with CSS):

<img src="smiley.gif" alt="Smiley face" width="42" height="42" style="vertical-align:middle;margin:0px 50px"> Example Add top and bottom margins to image (with CSS):

<img src="smiley.gif" alt="Smiley face" width="42" height="42" style="vertical-align:middle;margin:50px 0px"> Example How to insert images from another folder or from another web site:

<img src="/images/stickman.gif" alt="Stickman" width="24" height="39"> <img src="https://www.w3schools.com/images/lamp.jpg" alt="Lamp" width="32" height="32"> Example How to add a hyperlink to an image:

<a href="https://www.w3schools.com"> <img src="w3html.gif" alt="W3Schools.com" width="100" height="132"> </a> Example How to create an image map, with clickable regions. Each region is a hyperlink:

<img src="workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">

<map name="workmap"> <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm"> <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm"> <area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.htm"> </map> Related Pages HTML tutorial: HTML Images

HTML DOM reference: Image Object

CSS Tutorial: Styling Images

Default CSS Settings Most browsers will display the <img> element with the following default values:

Example img { display: inline-block; }





<!DOCTYPE html> <html> <body>

<h1>The img element</h1>

<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">

</body> </html>

<!DOCTYPE html> <html> <body>

<h1>Align image with CSS</h1>

<h2>vertical-align: bottom</h2> <p>This is some text. <img src="smiley.gif" alt="Smiley face" width="42" height="42" style="vertical-align:bottom"> This is some text. This is some text. This is some text.</p>

<h2>vertical-align: middle</h2> <p>This is some text. <img src="smiley.gif" alt="Smiley face" width="42" height="42" style="vertical-align:middle"> This is some text. This is some text. This is some text.</p>

<h2>vertical-align: top</h2> <p>This is some text. <img src="smiley.gif" alt="Smiley face" width="42" height="42" style="vertical-align:top"> This is some text. This is some text. This is some text.</p>

<h2>float: right</h2> <p>This is some text. <img src="smiley.gif" alt="Smiley face" width="42" height="42" style="float:right">This is some text. This is some text. This is some text.</p>

<h2>float: left</h2> <p>This is some text. <img src="smiley.gif" alt="Smiley face" width="42" height="42" style="float:left">This is some text. This is some text. This is some text.</p>

</body> </html>

<!DOCTYPE html> <html> <body>

<img src="smiley.gif" alt="Smiley face" width="42" height="42" style="border:5px solid black">

</body> </html>

<!DOCTYPE html> <html> <body>

<h1>Add margins with CSS</h1>

<h2>Image with no margins</h2> <p><img src="smiley.gif" alt="Smiley face" width="42" height="42"> This is some text. This is some text. This is some text.</p>

<h2>Image with left and right margins</h2> <p><img src="smiley.gif" alt="Smiley face" width="42" height="42" style="vertical-align:middle;margin:0px 50px">This is some text. This is some text. This is some text.</p>

</body> </html>

<!DOCTYPE html> <html> <body>

<h1>Add margins with CSS</h1>

<h2>Image with no margins</h2> <p><img src="smiley.gif" alt="Smiley face" width="42" height="42"> This is some text. This is some text. This is some text.</p>

<h2>Image with top and bottom margins</h2> <p><img src="smiley.gif" alt="Smiley face" width="42" height="42" style="vertical-align:middle;margin:50px 0px">This is some text. This is some text. This is some text.</p>

</body> </html>

<!DOCTYPE html> <html> <body>

<p>Insert an image from another folder:</p> <img src="/images/stickman.gif" alt="Stickman" width="24" height="39">

<p>Insert an image from a web site:</p> <img src="https://www.w3schools.com/images/lamp.jpg" alt="Lamp" width="32" height="32">

</body> </html>

<!DOCTYPE html> <html> <body>

<h1>Add a hyperlink to an image</h1>

<p><a href="https://www.w3schools.com"> <img src="w3html.gif" alt="W3Schools.com" width="100" height="132"> </a></p>

</body> </html>

<!DOCTYPE html> <html> <body>

<h1>The map and area elements</h1>

<p>Click on the computer, the phone, or the cup of coffee to go to a new page and read more about the topic:</p>

<img src="workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">

<map name="workmap"> <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm"> <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm"> <area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.htm"> </map>

</body> </html>

<!DOCTYPE html> <html> <head> <style> img { display: inline-block; } </style> </head> <body>

<p>An img element is displayed like this:</p>

<p>Some text <img src="smiley.gif" alt="Smiley face" width="42" height="42"> some text.</p>

<p>Change the default CSS settings to see the effect.</p>

</body> </html>
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HTML <input> Tag

Example An HTML form with three input fields; two text fields and one submit button:

<form action="/action_page.php"> <label for="fname">First name:</label> <input type="text" id="fname" name="fname"><br><br> <label for="lname">Last name:</label> <input type="text" id="lname" name="lname"><br><br> <input type="submit" value="Submit"> </form>

Definition and Usage The <input> tag specifies an input field where the user can enter data.

The <input> element is the most important form element.

The <input> element can be displayed in several ways, depending on the type attribute.

The different input types are as follows:

<input type="button"> <input type="checkbox"> <input type="color"> <input type="date"> <input type="datetime-local"> <input type="email"> <input type="file"> <input type="hidden"> <input type="image"> <input type="month"> <input type="number"> <input type="password"> <input type="radio"> <input type="range"> <input type="reset"> <input type="search"> <input type="submit"> <input type="tel"> <input type="text"> (default value) <input type="time"> <input type="url"> <input type="week"> Look at the type attribute to see examples for each input type!

Tips and Notes Tip: Always use the <label> tag to define labels for <input type="text">, <input type="checkbox">, <input type="radio">, <input type="file">, and <input type="password">.

Browser Support Element
<input> Yes Yes Yes Yes Yes Attributes Attribute Value Description accept fileextension audio/* video/* image/* mediatype Specifies a filter for what file types the user can pick from the file input dialog box (only for type="file") alt text Specifies an alternate text for images (only for type="image") autocomplete on off Specifies whether an <input> element should have autocomplete enabled autofocus autofocus Specifies that an <input> element should automatically get focus when the page loads checked checked Specifies that an <input> element should be pre-selected when the page loads (for type="checkbox" or type="radio") dirname inputname.dir Specifies that the text direction will be submitted disabled disabled Specifies that an <input> element should be disabled form form_id Specifies the form the <input> element belongs to formaction URL Specifies the URL of the file that will process the input control when the form is submitted (for type="submit" and type="image") formenctype application/x-www-form-urlencoded multipart/form-data text/plain Specifies how the form-data should be encoded when submitting it to the server (for type="submit" and type="image") formmethod get post Defines the HTTP method for sending data to the action URL (for type="submit" and type="image") formnovalidate formnovalidate Defines that form elements should not be validated when submitted formtarget _blank _self _parent top framename Specifies where to display the response that is received after submitting the form (for type="submit" and type="image") height pixels Specifies the height of an <input> element (only for type="image") list datalistid Refers to a <datalist> element that contains pre-defined options for an <input> element max number date Specifies the maximum value for an <input> element maxlength number Specifies the maximum number of characters allowed in an <input> element min number date Specifies a minimum value for an <input> element minlength number Specifies the minimum number of characters required in an <input> element multiple multiple Specifies that a user can enter more than one value in an <input> element name text Specifies the name of an <input> element pattern regexp Specifies a regular expression that an <input> element's value is checked against placeholder text Specifies a short hint that describes the expected value of an <input> element readonly readonly Specifies that an input field is read-only required required Specifies that an input field must be filled out before submitting the form size number Specifies the width, in characters, of an <input> element src URL Specifies the URL of the image to use as a submit button (only for type="image") step number any Specifies the interval between legal numbers in an input field type button checkbox color date datetime-local email file hidden image month number password radio range reset search submit tel text time url week Specifies the type <input> element to display value text Specifies the value of an <input> element

width pixels Specifies the width of an <input> element (only for type="image") Global Attributes The <input> tag also supports the Global Attributes in HTML.

Event Attributes The <input> tag also supports the Event Attributes in HTML.

Related Pages HTML tutorial:

HTML Forms HTML Form Elements HTML Input Types HTML Input Attributes HTML Input form* Attributes HTML DOM reference:

Input Button Object Input Checkbox Object Input Color Object Input Date Object Input Datetime Object Input DatetimeLocal Object Input Email Object Input FileUpload Object Input Hidden Object Input Image Object Input Month Object Input Number Object Input Password Object Input Range Object Input Radio Object Input Reset Object Input Search Object Input Submit Object Input Text Object Input Time Object Input URL Object Input Week Object Default CSS Settings None.

COLOR PICKER colorpicker LIKE US
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<!DOCTYPE html> <html> <body>

<h1>The input element</h1>

<form action="/action_page.php"> <label for="fname">First name:</label> <input type="text" id="fname" name="fname"><br><br> <label for="lname">Last name:</label> <input type="text" id="lname" name="lname"><br><br> <input type="submit" value="Submit"> </form>

<p>Click the "Submit" button and the form-data will be sent to a page on the server called "action_page.php".</p>

</body> </html>
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HTML <ins> Tag

Example A text with a deleted part, and a new, inserted part:

<p>My favorite color is <del>blue</del> <ins>red</ins>!</p> Definition and Usage The <ins> tag defines a text that has been inserted into a document. Browsers will usually underline inserted text.

Tip: Also look at the <del> tag to markup deleted text.

Browser Support Element
<ins> Yes Yes Yes Yes Yes Attributes Attribute Value Description cite URL Specifies a URL to a document that explains the reason why the text was inserted/changed datetime YYYY-MM-DDThh:mm:ssTZD Specifies the date and time when the text was inserted/changed Global Attributes The <ins> tag also supports the Global Attributes in HTML.

Event Attributes The <ins> tag also supports the Event Attributes in HTML.

More Examples Example Use CSS to style <del> and <ins>:

<html> <head> <style> del {background-color: tomato;} ins {background-color: yellow;} </style> </head> <body>

<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>

</body> </html> Related Pages HTML DOM reference: Ins Object

Default CSS Settings Most browsers will display the <ins> element with the following default values:

Example ins { text-decoration: underline; }




<!DOCTYPE html> <html> <body>

<h1>The ins element</h1>

<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>

</body> </html>

<!DOCTYPE html> <html> <head> <style> del {background-color: tomato;} ins {background-color: yellow;} </style> </head> <body>

<h1>The del and ins elements + CSS</h1>

<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>

</body> </html>

<!DOCTYPE html> <html> <head> <style> ins { text-decoration: underline; } </style> </head> <body>

<p>An ins element is displayed like this:</p>

<p><ins>Some inserted text.</ins></p>

<p>Change the default CSS settings to see the effect.</p>

</body> </html>
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HTML <kbd> Tag

Example Define some text as keyboard input in a document:

<p>Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy text (Windows).</p>

<p>Press <kbd>Cmd</kbd> + <kbd>C</kbd> to copy text (Mac OS).</p> More "Try it Yourself" examples below.

Definition and Usage The <kbd> tag is used to define keyboard input. The content inside is displayed in the browser's default monospace font.

Tip: This tag is not deprecated. However, it is possible to achieve richer effect by using CSS (see example below).

Also look at:

Tag Description <code> Defines a piece of computer code <samp> Defines sample output from a computer program <var> Defines a variable <pre> Defines preformatted text Browser Support Element
<kbd> Yes Yes Yes Yes Yes

Global Attributes The <kbd> tag also supports the Global Attributes in HTML.

Event Attributes The <kbd> tag also supports the Event Attributes in HTML.

More Examples Example Use CSS to style the <kbd> element:

<html> <head> <style> kbd { border-radius: 2px; padding: 2px; border: 1px solid black; } </style> </head> <body>

<p>Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy text (Windows).</p> <p>Press <kbd>Cmd</kbd> + <kbd>C</kbd> to copy text (Mac OS).</p>

</body> </html> Related Pages HTML tutorial: HTML Text Formatting

HTML DOM reference: Kbd Object

Default CSS Settings Most browsers will display the <kbd> element with the following default values:

Example kbd { font-family: monospace; }






<!DOCTYPE html> <html> <body>

<h1>The kbd element</h1>

<p>Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy text (Windows).</p>

<p>Press <kbd>Cmd</kbd> + <kbd>C</kbd> to copy text (Mac OS).</p>

</body> </html>

<!DOCTYPE html> <html> <head> <style> kbd { border-radius: 2px; padding: 2px; border: 1px solid black; } </style> </head> <body>

<h1>The kbd element + CSS</h1>

<p>Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy text (Windows).</p>

<p>Press <kbd>Cmd</kbd> + <kbd>C</kbd> to copy text (Mac OS).</p>

</body> </html>

<!DOCTYPE html> <html> <head> <style> kbd { font-family: monospace; } </style> </head> <body>

<p>A kbd element is displayed like this:</p>

<kbd>Keyboard input</kbd>

<p>Change the default CSS settings to see the effect.</p>

</body> </html>
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HTML <label> Tag

Example Three radio buttons with labels:

<form action="/action_page.php"> <label for="male">Male</label> <input type="radio" name="gender" id="male" value="male"><br> <label for="female">Female</label> <input type="radio" name="gender" id="female" value="female"><br> <label for="other">Other</label> <input type="radio" name="gender" id="other" value="other"><br><br> <input type="submit" value="Submit"> </form> Definition and Usage The <label> tag defines a label for several elements:

<input type="checkbox"> <input type="color"> <input type="date"> <input type="datetime-local"> <input type="email"> <input type="file"> <input type="month"> <input type="number"> <input type="password"> <input type="radio"> <input type="range"> <input type="search"> <input type="tel"> <input type="text"> <input type="time"> <input type="url"> <input type="week"> <meter> <progress> <select> <textarea> Proper use of labels with the elements above will benefit:

Screen reader users (will read out loud the label, when the user is focused on the element) Users who have difficulty clicking on very small regions (such as checkboxes) - because when a user clicks the text within the <label> element, it toggles the input (this increases the hit area). Tips and Notes Tip: The for attribute of <label> must be equal to the id attribute of the related element to bind them together. A label can also be bound to an element by placing the element inside the <label> element.

Browser Support Element
<label> Yes Yes Yes Yes Yes Attributes Attribute Value Description for elementid Specifies the id of the form element the label should be bound to form formid Specifies which form the label belongs to Global Attributes The <label> tag also supports the Global Attributes in HTML.

Event Attributes The <label> tag also supports the Event Attributes in HTML.

Related Pages HTML DOM reference: Label Object

Default CSS Settings Most browsers will display the <label> element with the following default values:

Example label { cursor: default; }







<!DOCTYPE html> <html> <body>

<h1>The label element</h1>

<p>Click on one of the text labels to toggle the related radio button:</p>

<form action="/action_page.php"> <label for="male">Male</label> <input type="radio" name="gender" id="male" value="male"><br> <label for="female">Female</label> <input type="radio" name="gender" id="female" value="female"><br> <label for="other">Other</label> <input type="radio" name="gender" id="other" value="other"><br><br> <input type="submit" value="Submit"> </form>

</body> </html>

<!DOCTYPE html> <html> <head> <style> label { cursor: default; } </style> </head> <body>

<p>A label element is displayed like this:</p>

<label for="male">Male</label> <input type="radio" name="gender" id="male" value="male"><br> <label for="female">Female</label> <input type="radio" name="gender" id="female" value="female"><br> <label for="other">Other</label> <input type="radio" name="gender" id="other" value="other">

</body> </html>

wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwkkkkkkkkkkkkkkkkkkkkkkkkkkkkddddddddddrrrrrrrrrrrrrfggggggggg




https://www.w3schools.com/tags/tag_legend.asp





HTML <legend> Tag

Example Group related elements in a form:

<form action="/action_page.php"> <fieldset> <legend>Personalia:</legend> <label for="fname">First name:</label> <input type="text" id="fname" name="fname"><br><br> <label for="lname">Last name:</label> <input type="text" id="lname" name="lname"><br><br> <label for="email">Email:</label> <input type="email" id="email" name="email"><br><br> <label for="birthday">Birthday:</label> <input type="date" id="birthday" name="birthday"><br><br> <input type="submit" value="Submit"> </fieldset> </form> More "Try it Yourself" examples below.

Definition and Usage The <legend> tag defines a caption for the <fieldset> element.

Browser Support Element
<legend> Yes Yes Yes Yes Yes Global Attributes The <legend> tag also supports the Global Attributes in HTML.

Event Attributes The <legend> tag also supports the Event Attributes in HTML.

More Examples Example Let the fieldset caption float to the right (with CSS):

<form action="/action_page.php"> <fieldset> <legend style="float:right">Personalia:</legend> <label for="fname">First name:</label> <input type="text" id="fname" name="fname"><br><br> <label for="lname">Last name:</label> <input type="text" id="lname" name="lname"><br><br> <label for="email">Email:</label> <input type="email" id="email" name="email"><br><br> <label for="birthday">Birthday:</label> <input type="date" id="birthday" name="birthday"><br><br> <input type="submit" value="Submit"> </fieldset> </form> Example Use CSS to style <fieldset> and <legend>:

<html> <head> <style> fieldset { background-color: #eeeeee; }

legend { background-color: gray; color: white; padding: 5px 10px; }

input { margin: 5px; } </style> </head> <body>

<form action="/action_page.php"> <fieldset> <legend>Personalia:</legend> <label for="fname">First name:</label> <input type="text" id="fname" name="fname"><br><br> <label for="lname">Last name:</label> <input type="text" id="lname" name="lname"><br><br> <label for="email">Email:</label> <input type="email" id="email" name="email"><br><br> <label for="birthday">Birthday:</label> <input type="date" id="birthday" name="birthday"><br><br> <input type="submit" value="Submit"> </fieldset> </form>

</body> </html> Related Pages HTML DOM reference: Legend Object

Default CSS Settings Most browsers will display the <legend> element with the following default values:

Example legend { display: block; padding-left: 2px; padding-right: 2px; border: none; }





<!DOCTYPE html> <html> <body>

<h1>The legend element</h1>

<form action="/action_page.php"> <fieldset> <legend>Personalia:</legend> <label for="fname">First name:</label> <input type="text" id="fname" name="fname"><br><br> <label for="lname">Last name:</label> <input type="text" id="lname" name="lname"><br><br> <label for="email">Email:</label> <input type="email" id="email" name="email"><br><br> <label for="birthday">Birthday:</label> <input type="date" id="birthday" name="birthday"><br><br> <input type="submit" value="Submit"> </fieldset> </form>

</body> </html>

<!DOCTYPE html> <html> <body>

<form action="/action_page.php"> <fieldset> <legend style="float:right">Personalia:</legend> <label for="fname">First name:</label> <input type="text" id="fname" name="fname"><br><br> <label for="lname">Last name:</label> <input type="text" id="lname" name="lname"><br><br> <label for="email">Email:</label> <input type="email" id="email" name="email"><br><br> <label for="birthday">Birthday:</label> <input type="date" id="birthday" name="birthday"><br><br> <input type="submit" value="Submit"> </fieldset> </form>

</body> </html>

<!DOCTYPE html> <html> <head> <style> fieldset { background-color: #eeeeee; }

legend { background-color: gray; color: white; padding: 5px 10px; }

input { margin: 5px; } </style> </head> <body>

<h1>The fieldset element + CSS</h1>

<form action="/action_page.php"> <fieldset> <legend>Personalia:</legend> <label for="fname">First name:</label> <input type="text" id="fname" name="fname"><br><br> <label for="lname">Last name:</label> <input type="text" id="lname" name="lname"><br><br> <label for="email">Email:</label> <input type="email" id="email" name="email"><br><br> <label for="birthday">Birthday:</label> <input type="date" id="birthday" name="birthday"><br><br> <input type="submit" value="Submit"> </fieldset> </form>

</body> </html>

<!DOCTYPE html> <html> <head> <style> legend { display: block; padding-left: 2px; padding-right: 2px; border: none; } </style> </head> <body>

<p>A legend element is displayed like this:</p>

<fieldset> <legend>Personalia:</legend> Name: <input type="text"><br> Email: <input type="text"><br> Date of birth: <input type="text"> </fieldset>

<p>Change the default CSS settings to see the effect.</p>

</body> </html>
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HTML <li> Tag

Example One ordered (<ol>) and one unordered (<ul>) HTML list:

<ol> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol>

<ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> More "Try it Yourself" examples below.

Definition and Usage The <li> tag defines a list item.

The <li> tag is used inside ordered lists(<ol>), unordered lists (<ul>), and in menu lists (<menu>).

In <ul> and <menu>, the list items will usually be displayed with bullet points.

In <ol>, the list items will usually be displayed with numbers or letters.

Tip: Use CSS to style lists.

Browser Support Element
<li> Yes Yes Yes Yes Yes Attributes Attribute Value Description value number Only for <ol> lists. Specifies the start value of a list item. The following list items will increment from that number Global Attributes The <li> tag also supports the Global Attributes in HTML.

Event Attributes The <li> tag also supports the Event Attributes in HTML.

More Examples Example Use of the value attribute in an ordered list:

<ol> <li value="100">Coffee</li> <li>Tea</li> <li>Milk</li> <li>Water</li> <li>Juice</li> <li>Beer</li> </ol> Example Set different list style types (with CSS):

<ol> <li>Coffee</li> <li style="list-style-type:lower-alpha">Tea</li> <li>Milk</li> </ol>

<ul> <li>Coffee</li> <li style="list-style-type:square">Tea</li> <li>Milk</li> </ul> Example Create a list inside a list (a nested list):

<ul> <li>Coffee</li> <li>Tea <ul> <li>Black tea</li> <li>Green tea</li> </ul> </li> <li>Milk</li> </ul> Example Create a more complex nested list:

<ul> <li>Coffee</li> <li>Tea <ul> <li>Black tea</li> <li>Green tea <ul> <li>China</li> <li>Africa</li> </ul> </li> </ul> </li> <li>Milk</li> </ul> Related Pages HTML tutorial: HTML Lists

HTML DOM reference: Li Object

CSS Tutorial: Styling Lists

Default CSS Settings Most browsers will display the <li> element with the following default values:

li { display: list-item; }





<!DOCTYPE html> <html> <body>

<h1>The ol and ul elements</h1>

<p>The ol element defines an ordered list:</p> <ol> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol>

<p>The ul element defines an unordered list:</p> <ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul>

</body> </html>

<!DOCTYPE html> <html> <body>

<h1>The li value attribute</h1>

<ol> <li value="100">Coffee</li> <li>Tea</li> <li>Milk</li> <li>Water</li> <li>Juice</li> <li>Beer</li> </ol>

</body> </html>

<!DOCTYPE html> <html> <body>

<h1>Define list type with CSS</h1>

<ol> <li>Coffee</li> <li style="list-style-type:lower-alpha">Tea</li> <li>Milk</li> </ol> <ul> <li>Coffee</li> <li style="list-style-type:square">Tea</li> <li>Milk</li> </ul>

</body> </html>

<!DOCTYPE html> <html> <body>

<h1>A list in a list in a list</h1>

<ul> <li>Coffee</li> <li>Tea <ul> <li>Black tea</li> <li>Green tea <ul> <li>China</li> <li>Africa</li> </ul> </li> </ul> </li> <li>Milk</li> </ul>

</body> </html>
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HTML <link> Tag

Example Link to an external style sheet:

<head> <link rel="stylesheet" href="styles.css"> </head> Definition and Usage The <link> tag defines the relationship between the current document and an external resource.

The <link> tag is most often used to link to external style sheets.

The <link> element is an empty element, it contains attributes only.

Browser Support When used for style sheets, the <link> tag is supported in all major browsers. No real support for anything else.

Element
<link> Yes Yes Yes Yes Yes Attributes Attribute Value Description crossorigin anonymous use-credentials Specifies how the element handles cross-origin requests href URL Specifies the location of the linked document hreflang languagecode Specifies the language of the text in the linked document media mediaquery Specifies on what device the linked document will be displayed referrerpolicy no-referrer no-referrer-when-downgrade origin origin-when-cross-origin unsafe-url Specifies which referrer to use when fetching the resource rel alternate author dns-prefetch help icon license next pingback preconnect prefetch preload prerender prev search stylesheet Required. Specifies the relationship between the current document and the linked document sizes HeightxWidth any Specifies the size of the linked resource. Only for rel="icon" title Defines a preferred or an alternate stylesheet type media_type Specifies the media type of the linked document Global Attributes The <link> tag also supports the Global Attributes in HTML.

Event Attributes The <link> tag also supports the Event Attributes in HTML.

Related Pages HTML tutorial: HTML Styles

HTML DOM reference: Link Object

Default CSS Settings Most browsers will display the <link> element with the following default values:

link { display: none; }





<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="styles.css"> </head> <body>

<h1>Hello World!</h1>

<h2>I am formatted with a linked style sheet.</h2>

<p>Me too!</p>

</body> </html>
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HTML <main> Tag

Example Specify the main content of the document:

<main> <h1>Most Popular Browsers</h1> <p>Chrome, Firefox, and Edge are the most used browsers today.</p>

<article> <h2>Google Chrome</h2> <p>Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser today!</p> </article>

<article> <h2>Mozilla Firefox</h2> <p>Mozilla Firefox is an open-source web browser developed by Mozilla. Firefox has been the second most popular web browser since January, 2018.</p> </article>

<article> <h2>Microsoft Edge</h2> <p>Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge replaced Internet Explorer.</p> </article> </main> More "Try it Yourself" examples below.

Definition and Usage The <main> tag specifies the main content of a document.

The content inside the <main> element should be unique to the document. It should not contain any content that is repeated across documents such as sidebars, navigation links, copyright information, site logos, and search forms.

Note: There must not be more than one <main> element in a document. The <main> element must NOT be a descendant of an <article>, <aside>, <footer>, <header>, or <nav> element.

Browser Support The numbers in the table specify the first browser version that fully supports the element.

Element
<main> 26.0 12.0 21.0 7.0 16.0 Global Attributes The <main> tag also supports the Global Attributes in HTML.

Event Attributes The <main> tag also supports the Event Attributes in HTML.

More Examples Example Use CSS to style the <main> element:

<html> <head> <style> main { margin: 0; padding: 5px; background-color: lightgray; }

main > h1, p, .browser { margin: 10px; padding: 5px; }

.browser { background: white; }

.browser > h2, p { margin: 4px; font-size: 90%; } </style> </head> <body>

<main> <h1>Most Popular Browsers</h1> <p>Chrome, Firefox, and Edge are the most used browsers today.</p> <article class="browser"> <h2>Google Chrome</h2> <p>Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser today!</p> </article> <article class="browser"> <h2>Mozilla Firefox</h2> <p>Mozilla Firefox is an open-source web browser developed by Mozilla. Firefox has been the second most popular web browser since January, 2018.</p> </article> <article class="browser"> <h2>Microsoft Edge</h2> <p>Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge replaced Internet Explorer.</p> </article> </main>

</body> </html>




<!DOCTYPE html> <html> <body>

<h1>The main element</h1>

<main> <h1>Most Popular Browsers</h1> <p>Chrome, Firefox, and Edge are the most used browsers today.</p>

<article> <h2>Google Chrome</h2> <p>Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser today!</p> </article>

<article> <h2>Mozilla Firefox</h2> <p>Mozilla Firefox is an open-source web browser developed by Mozilla. Firefox has been the second most popular web browser since January, 2018.</p> </article>

<article> <h2>Microsoft Edge</h2> <p>Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge replaced Internet Explorer.</p> </article> </main>

</body> </html>

<!DOCTYPE html> <html> <head> <style> main { margin: 0; padding: 5px; background-color: lightgray; }

main > h1, p, .browser { margin: 10px; padding: 5px; }

.browser { background: white; }

.browser > h2, p { margin: 4px; font-size: 90%; } </style> </head> <body>

<h1>The main element - Styled with CSS</h1>

<main> <h1>Most Popular Browsers</h1> <p>Chrome, Firefox, and Edge are the most used browsers today.</p> <article class="browser"> <h2>Google Chrome</h2> <p>Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser today!</p> </article> <article class="browser"> <h2>Mozilla Firefox</h2> <p>Mozilla Firefox is an open-source web browser developed by Mozilla. Firefox has been the second most popular web browser since January, 2018.</p> </article> <article class="browser"> <h2>Microsoft Edge</h2> <p>Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge replaced Internet Explorer.</p> </article> </main>

</body> </html>
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HTML <map> Tag

Example An image map, with clickable areas:

<img src="workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">

<map name="workmap"> <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm"> <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm"> <area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.htm"> </map> More "Try it Yourself" examples below.

Definition and Usage The <map> tag is used to define an image map. An image map is an image with clickable areas.

The required name attribute of the <map> element is associated with the <img>'s usemap attribute and creates a relationship between the image and the map.

The <map> element contains a number of <area> elements, that defines the clickable areas in the image map.

Browser Support Element
<map> Yes Yes Yes Yes Yes Attributes Attribute Value Description name mapname Required. Specifies the name of the image map Global Attributes The <map> tag also supports the Global Attributes in HTML.

Event Attributes The <map> tag also supports the Event Attributes in HTML.

More Examples Example Another image map, with clickable areas:

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">

<map name="planetmap"> <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun"> <area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury"> <area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus"> </map> Related Pages HTML DOM reference: Map Object

Default CSS Settings Most browsers will display the <map> element with the following default values:

map { display: inline; }





<!DOCTYPE html> <html> <body>

<h1>The map and area elements</h1>

<p>Click on the computer, the phone, or the cup of coffee to go to a new page and read more about the topic:</p>

<img src="workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">

<map name="workmap"> <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm"> <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm"> <area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.htm"> </map>

</body> </html>

<!DOCTYPE html> <html> <body>

<h1>The map and area elements</h1>

<p>Click on the sun or on one of the planets to watch it closer:</p>

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">

<map name="planetmap"> <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm"> <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm"> <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm"> </map>

</body> </html>
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HTML <mark> Tag

Example Highlight parts of a text:

<p>Do not forget to buy <mark>milk</mark> today.</p> Definition and Usage The <mark> tag defines text that should be marked or highlighted.

Browser Support The numbers in the table specify the first browser version that fully supports the element.

Element
<mark> 6.0 9.0 4.0 5.0 11.1 Global Attributes The <mark> tag also supports the Global Attributes in HTML.

Event Attributes The <mark> tag also supports the Event Attributes in HTML.

Related Pages HTML tutorial: HTML Text Formatting

HTML DOM reference: Mark Object

Default CSS Settings Most browsers will display the <mark> element with the following default values:

Example mark { background-color: yellow; color: black; }





<!DOCTYPE html> <html> <body>

<h1>The mark element</h1>

<p>Do not forget to buy <mark>milk</mark> today.</p>

</body> </html>

<!DOCTYPE html> <html> <head> <style> mark { background-color: yellow; color: black; } </style> </head> <body>

<p>A mark element is displayed like this:</p>

<mark>Highlighted text!!</mark>

<p>Change the default CSS settings to see the effect.</p>

</body> </html>
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HTML <meta> Tag

Example Describe metadata within an HTML document:

<head> <meta charset="UTF-8"> <meta name="description" content="Free Web tutorials"> <meta name="keywords" content="HTML, CSS, JavaScript"> <meta name="author" content="John Doe"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> More "Try it Yourself" examples below.

Definition and Usage The <meta> tag defines metadata about an HTML document. Metadata is data (information) about data.

<meta> tags always go inside the <head> element, and are typically used to specify character set, page description, keywords, author of the document, and viewport settings.

Metadata will not be displayed on the page, but is machine parsable.

Metadata is used by browsers (how to display content or reload page), search engines (keywords), and other web services.

There is a method to let web designers take control over the viewport (the user's visible area of a web page), through the <meta> tag (See "Setting The Viewport" example below).

Browser Support Element
<meta> Yes Yes Yes Yes Yes Attributes Attribute Value Description charset character_set Specifies the character encoding for the HTML document content text Specifies the value associated with the http-equiv or name attribute http-equiv content-security-policy content-type default-style refresh Provides an HTTP header for the information/value of the content attribute name application-name author description generator keywords viewport Specifies a name for the metadata Global Attributes The <meta> tag also supports the Global Attributes in HTML.

More Examples Define keywords for search engines:

<meta name="keywords" content="HTML, CSS, JavaScript"> Define a description of your web page:

<meta name="description" content="Free Web tutorials for HTML and CSS"> Define the author of a page:

<meta name="author" content="John Doe"> Refresh document every 30 seconds:

<meta http-equiv="refresh" content="30"> Setting the viewport to make your website look good on all devices:

<meta name="viewport" content="width=device-width, initial-scale=1.0"> Setting the Viewport The viewport is the user's visible area of a web page. It varies with the device - it will be smaller on a mobile phone than on a computer screen.

You should include the following <meta> element in all your web pages:

<meta name="viewport" content="width=device-width, initial-scale=1.0"> This gives the browser instructions on how to control the page's dimensions and scaling.

The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device).

The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.

Here is an example of a web page without the viewport meta tag, and the same web page with the viewport meta tag:

Tip: If you are browsing this page with a phone or a tablet, you can click on the two links below to see the difference.

Without the viewport meta tag

With the viewport meta tag

You can read more about the viewport in our Responsive Web Design - The Viewport Tutorial.

Related Pages HTML tutorial: HTML Head

HTML DOM reference: Meta Object

Default CSS Settings None.





<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="description" content="Free Web tutorials"> <meta name="keywords" content="HTML,CSS,XML,JavaScript"> <meta name="author" content="John Doe"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body>

<p>All meta information goes in the head section…</p>

</body> </html>
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HTML <meter> Tag

Example Use the meter element to measure data within a given range (a gauge):

<label for="diskc">Disk usage C:</label> <meter id="diskc" value="2" min="0" max="10">2 out of 10</meter><br>

<label for="diskd">Disk usage D:</label> <meter id="diskd" value="0.6">60%</meter> Definition and Usage The <meter> tag defines a scalar measurement within a known range, or a fractional value. This is also known as a gauge.

Examples: Disk usage, the relevance of a query result, etc.

Note: The <meter> tag should not be used to indicate progress (as in a progress bar). For progress bars, use the <progress> tag.

Tip: Always add the <label> tag for best accessibility practices!

Browser Support The numbers in the table specify the first browser version that fully supports the element.

Element
<meter> 8.0 13.0 16.0 6.0 11.5 Attributes Attribute Value Description form form_id Specifies which form the <meter> element belongs to high number Specifies the range that is considered to be a high value low number Specifies the range that is considered to be a low value max number Specifies the maximum value of the range min number Specifies the minimum value of the range. Default value is 0 optimum number Specifies what value is the optimal value for the gauge value number Required. Specifies the current value of the gauge Global Attributes The <meter> tag also supports the Global Attributes in HTML.

Event Attributes The <meter> tag also supports the Event Attributes in HTML.

Related Pages HTML DOM reference: Meter Object

Default CSS Settings None.




<!DOCTYPE html> <html> <body>

<h1>The meter element</h1>

<p>The meter element is used to display a gauge:</p>

<label for="diskc">Disk usage C:</label> <meter id="diskc" value="2" min="0" max="10">2 out of 10</meter><br>

<label for="diskd">Disk usage D:</label> <meter id="diskd" value="0.6">60%</meter>

<p><strong>Note:</strong> The meter tag is not supported in Edge 12 (or earlier).</p>

</body> </html>
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HTML <nav> Tag

Example A set of navigation links:

<nav> <a href="/html/">HTML</a> | <a href="/css/">CSS</a> | <a href="/js/">JavaScript</a> | <a href="/python/">Python</a> </nav> Definition and Usage The <nav> tag defines a set of navigation links.

Notice that NOT all links of a document should be inside a <nav> element. The <nav> element is intended only for major block of navigation links.

Browsers, such as screen readers for disabled users, can use this element to determine whether to omit the initial rendering of this content.

Browser Support The numbers in the table specify the first browser version that fully supports the element.

Element
<nav> 5.0 9.0 4.0 5.0 11.1 Global Attributes The <nav> tag also supports the Global Attributes in HTML.

Event Attributes The <nav> tag also supports the Event Attributes in HTML.

Related Pages HTML DOM reference: Nav Object

Default CSS Settings Most browsers will display the <nav> element with the following default values:

nav { display: block; }






<!DOCTYPE html> <html> <body>

<h1>The nav element</h1>

<p>The nav element defines a set of navigation links:</p>

<nav> <a href="/html/">HTML</a> | <a href="/css/">CSS</a> | <a href="/js/">JavaScript</a> | <a href="/python/">Python</a> </nav>

</body> </html>
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HTML <noframes> Tag Not Supported in HTML5. The <noframes> tag was used in HTML 4 to act as a fallback tag for browsers that did not support frames.

What to Use Instead? Example Use the <iframe> tag to embed another document within the current HTML document:

<iframe src="https://www.w3schools.com"></iframe>




<!DOCTYPE html> <html> <body>

<h1>The iframe element</h1>

<iframe src="https://www.w3schools.com" title="W3Schools Free Online Web Tutorials"> </iframe>

</body> </html>
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HTML <noscript> Tag

Example Use of the <noscript> tag:

<script> document.write("Hello World!") </script> <noscript>Your browser does not support JavaScript!</noscript> Definition and Usage The <noscript> tag defines an alternate content to be displayed to users that have disabled scripts in their browser or have a browser that doesn't support script.

The <noscript> element can be used in both <head> and <body>. When used inside <head>, the <noscript> element could only contain <link>, <style>, and <meta> elements.

Browser Support Element
<noscript> Yes Yes Yes Yes Yes Global Attributes The <noscript> tag also supports the Global Attributes in HTML.

Related Pages HTML tutorial: HTML Scripts

Default CSS Settings None.
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HTML <object> Tag

Example An embedded image:

<object data="pic_trulli.jpg" width="300" height="200"></object> Example An embedded HTML page:

<object data="snippet.html" width="500" height="200"></object> Example An embedded video:

<object data="video.mp4" width="400" height="300"></object> Definition and Usage The <object> tag defines a container for an external resource.

The external resource can be a web page, a picture, a media player, or a plug-in application.

To embed a picture, it is better to use the <img> tag.

To embed HTML, it is better to use the <iframe> tag.

To embed video or audio, it is better to use the <video> and <audio> tags.

Browser Support Element
<object> Yes Yes Yes Yes Yes Plug-ins The <object> tag was originally designed to embed browser Plug-ins.

Plug-ins are computer programs that extend the standard functionality of the browser.

Plug-ins have been used for many different purposes:

Run Java applets Run ActiveX controls Display Flash movies Display maps Scan for viruses Verify a bank id Warning !

Most browsers no longer support Java Applets and Plug-ins.

ActiveX controls are no longer supported in any browser.

The support for Shockwave Flash has also been turned off in modern browsers.

Attributes Attribute Value Description data URL Specifies the URL of the resource to be used by the object form formid Specifies which form the object belongs to height pixels Specifies the height of the object name name Specifies a name for the object type mediatype Specifies the media type of data specified in the data attribute typemustmatch true/false Specifies whether the type attribute and the actual content of the resource must match to be displayed usemap #mapname Specifies the name of a client-side image map to be used with the object width pixels Specifies the width of the object Global Attributes The <object> tag also supports the Global Attributes in HTML.

Event Attributes The <object> tag also supports the Event Attributes in HTML.

Related Pages HTML tutorial: HTML Object Element

HTML DOM reference: Object Object

Default CSS Settings Most browsers will display the <object> element with the following default values:

object:focus { outline: none; }





<!DOCTYPE html> <html> <body>

<h1>The object element</h1>

<object data="pic_trulli.jpg" width="300" height="200"></object>

</body> </html>

<!DOCTYPE html> <html> <body>

<h1>The object element</h1>

<object data="snippet.html" width="500" height="200"> </object>

</body> </html>

<!DOCTYPE html> <html> <body>

<object data="movie.mp4" width="400" height="300"></object>

</body> </html>
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HTML <ol> Tag

Example Two different ordered lists (the first list starts at 1, and the second starts at 50):

<ol> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol>

<ol start="50"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> More "Try it Yourself" examples below.

Definition and Usage The <ol> tag defines an ordered list. An ordered list can be numerical or alphabetical.

The <li> tag is used to define each list item.

Tip: Use CSS to style lists.

Tip: For unordered list, use the <ul> tag.

Browser Support Element
<ol> Yes Yes Yes Yes Yes Attributes Attribute Value Description reversed reversed Specifies that the list order should be reversed (9,8,7…) start number Specifies the start value of an ordered list type 1 A a I i Specifies the kind of marker to use in the list Global Attributes The <ol> tag also supports the Global Attributes in HTML.

Event Attributes The <ol> tag also supports the Event Attributes in HTML.

More Examples Example Set different list types (with CSS):

<ol style="list-style-type:upper-roman"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol>

<ol style="list-style-type:lower-alpha"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> Example Display all the different list types available with CSS:

<style> ol.a {list-style-type: armenian;} ol.b {list-style-type: cjk-ideographic;} ol.c {list-style-type: decimal;} ol.d {list-style-type: decimal-leading-zero;} ol.e {list-style-type: georgian;} ol.f {list-style-type: hebrew;} ol.g {list-style-type: hiragana;} ol.h {list-style-type: hiragana-iroha;} ol.i {list-style-type: katakana;} ol.j {list-style-type: katakana-iroha;} ol.k {list-style-type: lower-alpha;} ol.l {list-style-type: lower-greek;} ol.m {list-style-type: lower-latin;} ol.n {list-style-type: lower-roman;} ol.o {list-style-type: upper-alpha;} ol.p {list-style-type: upper-latin;} ol.q {list-style-type: upper-roman;} ol.r {list-style-type: none;} ol.s {list-style-type: inherit;} </style> Example Reduce and expand line-height in lists (with CSS):

<ol style="line-height:80%"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol>

<ol style="line-height:180%"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> Example Nest an unordered list inside an ordered list:

<ol> <li>Coffee</li> <li>Tea <ul> <li>Black tea</li> <li>Green tea</li> </ul> </li> <li>Milk</li> </ol> Related Pages HTML tutorial: HTML Lists

HTML DOM reference: Ol Object

CSS Tutorial: Styling Lists

Default CSS Settings Most browsers will display the <ol> element with the following default values:

Example ol { display: block; list-style-type: decimal; margin-top: 1em; margin-bottom: 1em; margin-left: 0; margin-right: 0; padding-left: 40px; }





<!DOCTYPE html> <html> <body>

<h1>The ol element</h1>

<ol> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol>

<ol start="50"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol>

</body> </html>

<!DOCTYPE html> <html> <body>

<h1>Specify list type with CSS</h1>

<ol style="list-style-type:upper-roman"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol>

<ol style="list-style-type:lower-alpha"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol>

</body> </html>

<!DOCTYPE html> <html> <head> <style> ol.a {list-style-type: armenian;} ol.b {list-style-type: cjk-ideographic;} ol.c {list-style-type: decimal;} ol.d {list-style-type: decimal-leading-zero;} ol.e {list-style-type: georgian;} ol.f {list-style-type: hebrew;} ol.g {list-style-type: hiragana;} ol.h {list-style-type: hiragana-iroha;} ol.i {list-style-type: katakana;} ol.j {list-style-type: katakana-iroha;} ol.k {list-style-type: lower-alpha;} ol.l {list-style-type: lower-greek;} ol.m {list-style-type: lower-latin;} ol.n {list-style-type: lower-roman;} ol.o {list-style-type: upper-alpha;} ol.p {list-style-type: upper-latin;} ol.q {list-style-type: upper-roman;} ol.r {list-style-type: none;} ol.s {list-style-type: inherit;} </style> </head> <body>

<h1>All the different list types for ol with CSS</h1>

<ol class="a"> <li>Armenian type</li> <li>Tea</li> <li>Coca Cola</li> </ol>

<ol class="b"> <li>Cjk-ideographic type</li> <li>Tea</li> <li>Coca Cola</li> </ol>

<ol class="c"> <li>Decimal type</li> <li>Tea</li> <li>Coca Cola</li> </ol>

<ol class="d"> <li>Decimal-leading-zero type</li> <li>Tea</li> <li>Coca Cola</li> </ol>

<ol class="e"> <li>Georgian type</li> <li>Tea</li> <li>Coca Cola</li> </ol>

<ol class="f"> <li>Hebrew type</li> <li>Tea</li> <li>Coca Cola</li> </ol>

<ol class="g"> <li>Hiragana type</li> <li>Tea</li> <li>Coca Cola</li> </ol>

<ol class="h"> <li>Hiragana-iroha type</li> <li>Tea</li> <li>Coca Cola</li> </ol>

<ol class="i"> <li>Katakana type</li> <li>Tea</li> <li>Coca Cola</li> </ol>

<ol class="j"> <li>Katakana-iroha type</li> <li>Tea</li> <li>Coca Cola</li> </ol>

<ol class="k"> <li>Lower-alpha type</li> <li>Tea</li> <li>Coca Cola</li> </ol>

<ol class="l"> <li>Lower-greek type</li> <li>Tea</li> <li>Coca Cola</li> </ol>

<ol class="m"> <li>Lower-latin type</li> <li>Tea</li> <li>Coca Cola</li> </ol>

<ol class="n"> <li>Lower-roman type</li> <li>Tea</li> <li>Coca Cola</li> </ol>

<ol class="o"> <li>Upper-alpha type</li> <li>Tea</li> <li>Coca Cola</li> </ol>

<ol class="p"> <li>Upper-latin type</li> <li>Tea</li> <li>Coca Cola</li> </ol>

<ol class="q"> <li>Upper-roman type</li> <li>Tea</li> <li>Coca Cola</li> </ol>

<ol class="r"> <li>None type</li> <li>Tea</li> <li>Coca Cola</li> </ol>

<ol class="s"> <li>inherit type</li> <li>Tea</li> <li>Coca Cola</li> </ol>

</body> </html>

<!DOCTYPE html> <html> <body>

<h1>Modify lineheight of lists with CSS</h1>

<p>Reduce line height with CSS:</p> <ol style="line-height:80%"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol>

<p>Expand line height with CSS:</p> <ol style="line-height:180%"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol>

</body> </html>

<!DOCTYPE html> <html> <body>

<h1>An unordered list inside an ordered list</h1>

<ol> <li>Coffee</li> <li>Tea <ul> <li>Black tea</li> <li>Green tea</li> </ul> </li> <li>Milk</li> </ol>

</body> </html>

<!DOCTYPE html> <html> <head> <style> ol { display: block; list-style-type: decimal; margin-top: 1em; margin-bottom: 1em; margin-left: 0; margin-right: 0; padding-left: 40px; } </style> </head> <body>

<p>An ol element is displayed like this:</p>

<ol> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol>

<p>Change the default CSS settings to see the effect.</p>

</body> </html>
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HTML <optgroup> Tag

Example Group related options with <optgroup> tags:

<label for="cars">Choose a car:</label> <select name="cars" id="cars"> <optgroup label="Swedish Cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> </optgroup> <optgroup label="German Cars"> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </optgroup> </select> Definition and Usage The <optgroup> tag is used to group related options in a <select> element (drop-down list).

If you have a long list of options, groups of related options are easier to handle for a user.

Browser Support Element
<optgroup> Yes Yes Yes Yes Yes Attributes Attribute Value Description disabled disabled Specifies that an option-group should be disabled label text Specifies a label for an option-group Global Attributes The <optgroup> tag also supports the Global Attributes in HTML.

Event Attributes The <optgroup> tag also supports the Event Attributes in HTML.

Related Pages HTML DOM reference: OptionGroup Object

Default CSS Settings None.






<!DOCTYPE html> <html> <body>

<h1>The optgroup element</h1>

<p>The optgroup tag is used to group related options in a drop-down list:</p>

<form action="/action_page.php"> <label for="cars">Choose a car:</label> <select name="cars" id="cars"> <optgroup label="Swedish Cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> </optgroup> <optgroup label="German Cars"> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </optgroup> </select> <br><br> <input type="submit" value="Submit"> </form>

</body> </html>
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HTML <option> Tag

Example A drop-down list with four options:

<label for="cars">Choose a car:</label>

<select id="cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="opel">Opel</option> <option value="audi">Audi</option> </select> More "Try it Yourself" examples below.

Definition and Usage The <option> tag defines an option in a select list.

<option> elements go inside a <select>, <optgroup>, or <datalist> element.

Note: The <option> tag can be used without any attributes, but you usually need the value attribute, which indicates what is sent to the server on form submission.

Tip: If you have a long list of options, you can group related options within the <optgroup> tag.

Browser Support Element
<option> Yes Yes Yes Yes Yes

Attributes Attribute Value Description disabled disabled Specifies that an option should be disabled label text Specifies a shorter label for an option selected selected Specifies that an option should be pre-selected when the page loads value text Specifies the value to be sent to a server Global Attributes The <option> tag also supports the Global Attributes in HTML.

Event Attributes The <option> tag also supports the Event Attributes in HTML.

More Examples Example Use of <option> in a <datalist> element:

<label for="browser">Choose your browser from the list:</label> <input list="browsers" name="browser" id="browser">

<datalist id="browsers"> <option value="Edge"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist> Example Use of <option> in <optgroup> elements:

<label for="cars">Choose a car:</label> <select id="cars"> <optgroup label="Swedish Cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> </optgroup> <optgroup label="German Cars"> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </optgroup> </select> Related Pages HTML DOM reference: Option Object

Default CSS Settings None.






<!DOCTYPE html> <html> <body>

<h1>The option element</h1>

<label for="cars">Choose a car:</label>

<select id="cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="opel">Opel</option> <option value="audi">Audi</option> </select>

</body> </html>

<!DOCTYPE html> <html> <body>

<h1>The datalist element</h1>

<form action="/action_page.php" method="get"> <label for="browser">Choose your browser from the list:</label> <input list="browsers" name="browser" id="browser"> <datalist id="browsers"> <option value="Edge"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist> <input type="submit"> </form>

<p><strong>Note:</strong> The datalist tag is not supported in Safari 12.0 (or earlier).</p>

</body> </html>

<!DOCTYPE html> <html> <body>

<h1>The optgroup element</h1>

<p>The optgroup tag is used to group related options in a drop-down list:</p>

<form action="/action_page.php"> <label for="cars">Choose a car:</label> <select name="cars" id="cars"> <optgroup label="Swedish Cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> </optgroup> <optgroup label="German Cars"> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </optgroup> </select> <br><br> <input type="submit" value="Submit"> </form>

</body> </html>
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HTML <output> Tag

Example Perform a calculation and show the result in an <output> element:

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)"> <input type="range" id="a" value="50"> +<input type="number" id="b" value="25"> =<output name="x" for="a b"></output> </form> Definition and Usage The <output> tag is used to represent the result of a calculation (like one performed by a script).

Browser Support The numbers in the table specify the first browser version that fully supports the element.

Element
<output> 10.0 13.0 4.0 5.1 11.0 Attributes Attribute Value Description for elementid Specifies the relationship between the result of the calculation, and the elements used in the calculation form formid Specifies which form the output element belongs to name name Specifies a name for the output element

Global Attributes The <output> tag also supports the Global Attributes in HTML.

Event Attributes The <output> tag also supports the Event Attributes in HTML.

Related Pages HTML DOM reference: Output Object

Default CSS Settings Most browsers will display the <output> element with the following default values:

output { display: inline; }




<!DOCTYPE html> <html> <body>

<h1>The output element</h1>

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)"> <input type="range" id="a" value="50"> +<input type="number" id="b" value="25"> =<output name="x" for="a b"></output> </form>

<p><strong>Note:</strong> The output element is not supported in Edge 12 (or earlier).</p>

</body> </html>
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HTML <p> Tag

Example A paragraph is marked up as follows:

<p>This is some text in a paragraph.</p> More "Try it Yourself" examples below.

Definition and Usage The <p> tag defines a paragraph.

Browsers automatically add a single blank line before and after each <p> element.

Tip: Use CSS to style paragraphs.

Browser Support Element
<p> Yes Yes Yes Yes Yes Global Attributes The <p> tag also supports the Global Attributes in HTML.

Event Attributes The <p> tag also supports the Event Attributes in HTML.

More Examples Example Align text in a paragraph (with CSS):

<p style="text-align:right">This is some text in a paragraph.</p> Example Style paragraphs with CSS:

<html> <head> <style> p { color: navy; text-indent: 30px; text-transform: uppercase; } </style> </head> <body>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</body> </html> Example More on paragraphs:

<p> This paragraph contains a lot of lines in the source code, but the browser ignores it. </p> Example Poem problems in HTML:

<p> My Bonnie lies over the ocean. My Bonnie lies over the sea. My Bonnie lies over the ocean. Oh, bring back my Bonnie to me. </p> Related Pages HTML tutorial: HTML Paragraphs

HTML DOM reference: Paragraph Object

Default CSS Settings Most browsers will display the <p> element with the following default values:

Example p { display: block; margin-top: 1em; margin-bottom: 1em; margin-left: 0; margin-right: 0; }






<!DOCTYPE html> <html> <body>

<h1>The p element</h1>

<p>This is a paragraph.</p> <p>This is a paragraph.</p> <p>This is a paragraph.</p>

</body> </html>

<!DOCTYPE html> <html> <body>

<h1>Align text with CSS</h1>

<p style="text-align:right">This is some text in a paragraph.</p>

</body> </html>

<!DOCTYPE html> <html> <head> <style> p { color: navy; text-indent: 30px; text-transform: uppercase; } </style> </head> <body>

<h1>Style paragraphs with CSS</h1>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</body> </html>

<!DOCTYPE html> <html> <body>

<p> My Bonnie lies over the ocean. My Bonnie lies over the sea. My Bonnie lies over the ocean. Oh, bring back my Bonnie to me. </p>

<p>Note that the browser simply ignores the line breaks in the source code!</p>

</body> </html>

<!DOCTYPE html> <html> <head> <style> p { display: block; margin-top: 1em; margin-bottom: 1em; margin-left: 0; margin-right: 0; } </style> </head> <body>

<p>A p element is displayed like this:</p>

<p>This is a paragraph.</p>

<p>Change the default CSS settings to see the effect.</p>

</body> </html>
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HTML <param> Tag

Example Set the "autoplay" parameter to "true", so the sound will start playing as soon as the page loads:

<object data="horse.wav"> <param name="autoplay" value="true"> </object> Definition and Usage The <param> tag is used to define parameters for an <object> element.

Browser Support The <param> tag is supported in all major browsers. However, the file format defined in <object> may not be supported in all browsers.

Element
<param> Yes Yes Yes Yes Yes Attributes Attribute Value Description name name Specifies the name of a parameter value value Specifies the value of the parameter Global Attributes The <param> tag also supports the Global Attributes in HTML.

Event Attributes The <param> tag also supports the Event Attributes in HTML.

Related Pages HTML DOM reference: Parameter Object

Default CSS Settings Most browsers will display the <param> element with the following default values:

param { display: none; }






<!DOCTYPE html> <html> <body>

<h1>The param element</h1>

<object data="horse.wav"> <param name="autoplay" value="true"> </object>

</body> </html>
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HTML <picture> Tag

Example How to use the <picture> tag:

<picture> <source media="(min-width:650px)" srcset="imgpinkflowers.jpg"> <source media="(min-width:465px)" srcset="imgwhiteflower.jpg"> <img src="imgorangeflowers.jpg" alt="Flowers" style="width:auto;"> </picture> Definition and Usage The <picture> tag gives web developers more flexibility in specifying image resources.

The most common use of the <picture> element will be for art direction in responsive designs. Instead of having one image that is scaled up or down based on the viewport width, multiple images can be designed to more nicely fill the browser viewport.

The <picture> element contains two tags: one or more <source> tags and one <img> tag.

The browser will look for the first <source> element where the media query matches the current viewport width, and then it will display the proper image (specified in the srcset attribute). The <img> element is required as the last child of the <picture> element, as a fallback option if none of the source tags matches.

Tip: The <picture> element works "similar" to <video> and <audio>. You set up different sources, and the first source that fits the preferences is the one being used.

Browser Support The numbers in the table specify the first browser version that fully supports the element.

Element
<picture> 38.0 13.0 38.0 9.1 25.0 Global Attributes The <picture> tag also supports the Global Attributes in HTML.

Event Attributes The <picture> tag also supports the Event Attributes in HTML.

Related Pages HTML Tutorial: HTML <picture> Element

CSS Tutorial: CSS Responsive Design - Images





<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body>

<h1>The picture element</h1>

<p>Resize the browser window to load different images.</p>

<picture> <source media="(min-width:650px)" srcset="imgpinkflowers.jpg"> <source media="(min-width:465px)" srcset="imgwhiteflower.jpg"> <img src="imgorangeflowers.jpg" alt="Flowers" style="width:auto;"> </picture>

</body> </html>
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HTML <pre> Tag

Example Preformatted text:

<pre> Text in a pre element is displayed in a fixed-width font, and it preserves both spaces and line breaks </pre> More "Try it Yourself" examples below.

Definition and Usage The <pre> tag defines preformatted text.

Text in a <pre> element is displayed in a fixed-width font, and the text preserves both spaces and line breaks. The text will be displayed exactly as written in the HTML source code.

Also look at:

Tag Description <code> Defines a piece of computer code <samp> Defines sample output from a computer program <kbd> Defines keyboard input <var> Defines a variable Browser Support Element
<pre> Yes Yes Yes Yes Yes

Global Attributes The <pre> tag also supports the Global Attributes in HTML.

Event Attributes The <pre> tag also supports the Event Attributes in HTML.

More Examples Example How to create a pre-formatted text with a fixed width (with CSS):

<div style="width:200px;overflow:auto"> <pre>This is a pre with a fixed width. It will use as much space as specified.</pre> </div> Related Pages HTML Tutorial: HTML Text Formatting

HTML DOM reference: Pre Object

Default CSS Settings Most browsers will display the <pre> element with the following default values:

Example pre { display: block; font-family: monospace; white-space: pre; margin: 1em 0; }





<!DOCTYPE html> <html> <body>

<h1>The pre element</h1>

<pre> Text in a pre element is displayed in a fixed-width font, and it preserves both spaces and line breaks </pre>

</body> </html>

<!DOCTYPE html> <html> <body>

<h2>Standard pre</h2> <pre>This is a standard pre. It will use as much space as it needs.</pre>

<h2>Fixed width pre</h2> <div style="width:200px;overflow:auto"> <pre>This is a pre with a fixed width. It will use as much space as specified.</pre> </div>

</body> </html>

<!DOCTYPE html> <html> <head> <style> pre { display: block; font-family: monospace; white-space: pre; margin: 1em 0; } </style> </head> <body>

<p>A pre element is displayed like this:</p>

<pre> Text in a pre element is displayed in a fixed-width font, and it preserves both spaces and line breaks </pre>

<p>Change the default CSS settings to see the effect.</p>

</body> </html>
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HTML <progress> Tag

Example Show a progress bar:

<label for="file">Downloading progress:</label> <progress id="file" value="32" max="100"> 32% </progress> Definition and Usage The <progress> tag represents the completion progress of a task.

Tip: Always add the <label> tag for best accessibility practices!

Tips and Notes Tip: Use the <progress> tag in conjunction with JavaScript to display the progress of a task.

Note: The <progress> tag is not suitable for representing a gauge (e.g. disk space usage or relevance of a query result). To represent a gauge, use the <meter> tag instead.

Browser Support The numbers in the table specify the first browser version that fully supports the element.

Element
<progress> 8.0 10.0 16.0 6.0 11.0

Attributes Attribute Value Description max number Specifies how much work the task requires in total. Default value is 1 value number Specifies how much of the task has been completed Global Attributes The <progress> tag also supports the Global Attributes in HTML.

Event Attributes The <progress> tag also supports the Event Attributes in HTML.

Related Pages HTML DOM reference: Progress Object

Default CSS Settings None.






<!DOCTYPE html> <html> <body>

<h1>The progress element</h1>

<label for="file">Downloading progress:</label> <progress id="file" value="32" max="100"> 32% </progress>

</body> </html>
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HTML <q> Tag

Example Mark up a short quotation:

<p>WWF's goal is to: <q>Build a future where people live in harmony with nature.</q> We hope they succeed.</p> More "Try it Yourself" examples below.

Definition and Usage The <q> tag defines a short quotation.

Browsers normally insert quotation marks around the quotation.

Tip: Use <blockquote> for long quotations.

Browser Support Element
<q> Yes Yes Yes Yes Yes Attributes Attribute Value Description cite URL Specifies the source URL of the quote

Global Attributes The <q> tag also supports the Global Attributes in HTML.

Event Attributes The <q> tag also supports the Event Attributes in HTML.

More Examples Example Use CSS to style the <q> element:

<html> <head> <style> q { color: gray; font-style: italic; } </style> </head> <body>

<p>WWF's goal is to: <q>Build a future where people live in harmony with nature.</q> We hope they succeed.</p>

</body> </html> Related Pages HTML DOM reference: Quote Object

Default CSS Settings Most browsers will display the <q> element with the following default values:

Example q { display: inline; }

q:before { content: open-quote; }

q:after { content: close-quote; }




<!DOCTYPE html> <html> <body>

<h1>The q element</h1>

<p>WWF's goal is to: <q>Build a future where people live in harmony with nature.</q> We hope they succeed.</p>

</body> </html>

<!DOCTYPE html> <html> <head> <style> q { color: gray; font-style: italic; } </style> </head> <body>

<h1>The q element + CSS</h1>

<p>WWF's goal is to: <q>Build a future where people live in harmony with nature.</q> We hope they succeed.</p>

</body> </html>

<!DOCTYPE html> <html> <head> <style> q { display: inline; }

q:before { content: open-quote; }

q:after { content: close-quote; } </style> </head> <body>

<p>A q element is displayed like this:</p>

<q>Build a future where people live in harmony with nature.</q>

<p>Change the default CSS settings to see the effect.</p>

</body> </html>
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HTML <rp> Tag

Example A ruby annotation:

<ruby> 漢 <rt><rp>(</rp>ㄏㄢˋ<rp>)</rp></rt> </ruby> Definition and Usage The <rp> tag can be used to provide parentheses around a ruby text, to be shown by browsers that do not support ruby annotations.

Use <rp> together with <ruby> and <rt>: The <ruby> element consists of one or more characters that needs an explanation/pronunciation, and an <rt> element that gives that information, and an optional <rp> element that defines what to show for browsers that not support ruby annotations.

Browser Support The numbers in the table specify the first browser version that fully supports the element.

Element
<rp> 5.0 5.5 38.0 5.0 15.0 Global Attributes The <rp> tag also supports the Global Attributes in HTML.

Event Attributes The <rp> tag also supports the Event Attributes in HTML.

Default CSS Settings None.




<!DOCTYPE html> <html> <body>

<h1>The rp element</h1>

<ruby> 漢 <rt><rp>(</rp>ㄏㄢˋ<rp>)</rp></rt> </ruby>

</body> </html>
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HTML <rt> Tag

Example A ruby annotation:

<ruby> 漢 <rt> ㄏㄢˋ </rt> </ruby> Definition and Usage The <rt> tag defines an explanation or pronunciation of characters (for East Asian typography) in a ruby annotation.

Use <rt> together with <ruby> and <rp>: The <ruby> element consists of one or more characters that needs an explanation/pronunciation, and an <rt> element that gives that information, and an optional <rp> element that defines what to show for browsers that not support ruby annotations.

Browser Support The numbers in the table specify the first browser version that fully supports the element.

Element
<rt> 5.0 5.5 38.0 5.0 15.0 Global Attributes The <rt> tag also supports the Global Attributes in HTML.

Event Attributes The <rt> tag also supports the Event Attributes in HTML.

Default CSS Settings Most browsers will display the <rt> element with the following default values:

rt { line-height: normal; }




<!DOCTYPE html> <html> <body>

<h1>The ruby and rt elements</h1>

<ruby> 漢 <rt> ㄏㄢˋ </rt> </ruby>

</body> </html>
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HTML <ruby> Tag

Example A ruby annotation:

<ruby> 漢 <rt> ㄏㄢˋ </rt> </ruby> Definition and Usage The <ruby> tag specifies a ruby annotation.

A ruby annotation is a small extra text, attached to the main text to indicate the pronunciation or meaning of the corresponding characters. This kind of annotation is often used in Japanese publications.

Use <ruby> together with <rt> and <rp>: The <ruby> element consists of one or more characters that needs an explanation/pronunciation, and an <rt> element that gives that information, and an optional <rp> element that defines what to show for browsers that do not support ruby annotations.

Browser Support The numbers in the table specify the first browser version that fully supports the element.

Element
<ruby> 5.0 5.5 38.0 5.0 15.0 Global Attributes The <ruby> tag also supports the Global Attributes in HTML.

Event Attributes The <ruby> tag also supports the Event Attributes in HTML.

COLOR PICKER colorpicker LIKE US

HOW TO Tabs Dropdowns Accordions Side Navigation Top Navigation Modal Boxes Progress Bars Parallax Login Form HTML Includes Google Maps Range Sliders Tooltips Slideshow Filter List Sort List Certificates

Top Tutorials HTML Tutorial CSS Tutorial JavaScript Tutorial How To Tutorial SQL Tutorial Python Tutorial W3.CSS Tutorial Bootstrap Tutorial PHP Tutorial Java Tutorial C++ Tutorial jQuery Tutorial Top References HTML Reference CSS Reference JavaScript Reference SQL Reference Python Reference W3.CSS Reference Bootstrap Reference PHP Reference HTML Colors Java Reference Angular Reference jQuery Reference Top Examples HTML Examples CSS Examples JavaScript Examples How To Examples SQL Examples Python Examples W3.CSS Examples Bootstrap Examples PHP Examples Java Examples XML Examples jQuery Examples Web Certificates HTML Certificate CSS Certificate JavaScript Certificate SQL Certificate Python Certificate PHP Certificate Bootstrap Certificate XML Certificate jQuery Certificate W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Copyright 1999-2021 by Refsnes Data. All Rights Reserved. W3Schools is Powered by W3.CSS.

W3Schools.com

<!DOCTYPE html> <html> <body>

<h1>The ruby and rt elements</h1>

<ruby> 漢 <rt> ㄏㄢˋ </rt> </ruby>

</body> </html>
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HTML <s> Tag

Example Mark up text that is no longer correct:

<p><s>Only 50 tickets left!</s></p> <p>SOLD OUT!</p> Definition and Usage The <s> tag specifies text that is no longer correct, accurate or relevant. The text will be displayed with a line through it.

The <s> tag should not be used to define deleted text in a document, use the <del> tag for that.

Browser Support Element
<s> Yes Yes Yes Yes Yes Global Attributes The <s> tag also supports the Global Attributes in HTML.

Event Attributes The <s> tag also supports the Event Attributes in HTML.

Related Pages HTML tutorial: HTML Text Formatting

HTML DOM reference: S Object

Default CSS Settings Most browsers will display the <s> element with the following default values:

Example s { text-decoration: line-through; }





<!DOCTYPE html> <html> <body>

<h1>The s element</h1>

<p><s>Only 50 tickets left!</s></p> <p>SOLD OUT!</p>

</body> </html>

<!DOCTYPE html> <html> <head> <style> s { text-decoration: line-through; } </style> </head> <body>

<p>An s element is displayed like this:</p>

<p><s>Some no-longer correct text.</s></p>

<p>Change the default CSS settings to see the effect.</p>

</body> </html>
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HTML <samp> Tag

Example Define some text as sample output from a computer program in a document:

<p>Message from my computer:</p>

<p><samp>File not found.<br>Press F1 to continue</samp></p> Definition and Usage The <samp> tag is used to define sample output from a computer program. The content inside is displayed in the browser's default monospace font.

Tip: This tag is not deprecated. However, it is possible to achieve richer effect by using CSS.

Also look at:

Tag Description <code> Defines a piece of computer code <kbd> Defines keyboard input <var> Defines a variable <pre> Defines preformatted text Browser Support Element
<samp> Yes Yes Yes Yes Yes

Global Attributes The <samp> tag also supports the Global Attributes in HTML.

Event Attributes The <samp> tag also supports the Event Attributes in HTML.

Related Pages HTML tutorial: HTML Text Formatting

HTML DOM reference: Samp Object

Default CSS Settings Most browsers will display the <samp> element with the following default values:

Example samp { font-family: monospace; }





<!DOCTYPE html> <html> <body>

<h1>The samp element</h1>

<p>Message from my computer:</p>

<p><samp>File not found.<br>Press F1 to continue</samp></p>

</body> </html>

<!DOCTYPE html> <html> <head> <style> samp { font-family: monospace; } </style> </head> <body>

<p>A samp element is displayed like this:</p>

<samp>Sample output from a computer program</samp>

<p>Change the default CSS settings to see the effect.</p>

</body> </html>
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HTML <script> Tag

Example Write "Hello JavaScript!" with JavaScript:

<script> document.getElementById("demo").innerHTML = "Hello JavaScript!"; </script> Definition and Usage The <script> tag is used to embed a client-side script (JavaScript).

The <script> element either contains scripting statements, or it points to an external script file through the src attribute.

Common uses for JavaScript are image manipulation, form validation, and dynamic changes of content.

Tips and Notes Note: There are several ways an external script can be executed:

If async="async": The script is executed asynchronously with the rest of the page (the script will be executed while the page continues the parsing) If async is not present and defer="defer": The script is executed when the page has finished parsing If neither async or defer is present: The script is fetched and executed immediately, before the browser continues parsing the page Tip: Also look at the <noscript> element for users that have disabled scripts in their browser, or have a browser that doesn't support client-side scripting.

Tip: If you want to learn more about JavaScript, visit our JavaScript Tutorial.

Browser Support Element
<script> Yes Yes Yes Yes Yes Attributes Attribute Value Description async async Specifies that the script is executed asynchronously (only for external scripts) crossorigin anonymous use-credentials Sets the mode of the request to an HTTP CORS Request defer defer Specifies that the script is executed when the page has finished parsing (only for external scripts) integrity filehash Allows a browser to check the fetched script to ensure that the code is never loaded if the source has been manipulated nomodule True False Specifies that the script should not be executed in browsers supporting ES2015 modules referrerpolicy no-referrer no-referrer-when-downgrade origin origin-when-cross-origin same-origin strict-origin strict-origin-when-cross-origin unsafe-url Specifies which referrer information to send when fetching a script src URL Specifies the URL of an external script file type scripttype Specifies the media type of the script Differences Between HTML and XHTML In XHTML, the content inside scripts is declared as #PCDATA (instead of CDATA), which means that entities will be parsed.

This means that in XHTML, all special characters should be encoded, or all content should be wrapped inside a CDATA section:

<script type="text/javascript"> //<![CDATA[ var i = 10; if (i < 5) { // some code } //]]> </script> Global Attributes The <script> tag also supports the Global Attributes in HTML.

Related Pages HTML tutorial: HTML Scripts

HTML DOM reference: Script Object

JavaScript Tutorial: Learn JavaScript

Default CSS Settings Most browsers will display the <script> element with the following default values:

script { display: none; }






aaaa

<!DOCTYPE html> <html> <body>

<h1>The script element</h1>

<p id="demo"></p>

<script> document.getElementById("demo").innerHTML = "Hello JavaScript!"; </script>

</body> </html>
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HTML <section> Tag

Example Two sections in a document:

<section> <h2>WWF History</h2> <p>The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.</p> </section>

<section> <h2>WWF's Symbol</h2> <p>The Panda has become the symbol of WWF. The well-known panda logo of WWF originated from a panda named Chi Chi that was transferred from the Beijing Zoo to the London Zoo in the same year of the establishment of WWF.</p> </section> Definition and Usage The <section> tag defines a section in a document.

Browser Support The numbers in the table specify the first browser version that fully supports the element.

Element
<section> 5.0 9.0 4.0 5.0 11.5 Global Attributes The <section> tag also supports the Global Attributes in HTML.

Event Attributes The <section> tag also supports the Event Attributes in HTML.

Related Pages HTML DOM reference: Section Object

Default CSS Settings Most browsers will display the <section> element with the following default values:

Example section { display: block; }





<!DOCTYPE html> <html> <body>

<h1>The section element</h1>

<section> <h2>WWF History</h2> <p>The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.</p> </section>

<section> <h2>WWF's Symbol</h2> <p>The Panda has become the symbol of WWF. The well-known panda logo of WWF originated from a panda named Chi Chi that was transferred from the Beijing Zoo to the London Zoo in the same year of the establishment of WWF.</p> </section>

</body> </html>

<!DOCTYPE html> <html> <head> <style> section { display: block; } </style> </head> <body>

<p>A section element is displayed like this:</p>

<section> <h1>WWF</h1> <p>The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.</p> </section>

<p>Change the default CSS settings to see the effect.</p>

</body> </html>
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HTML <select> Tag

Example Create a drop-down list with four options:

<label for="cars">Choose a car:</label>

<select name="cars" id="cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </select> More "Try it Yourself" examples below.

Definition and Usage The <select> element is used to create a drop-down list.

The <select> element is most often used in a form, to collect user input.

The name attribute is needed to reference the form data after the form is submitted (if you omit the name attribute, no data from the drop-down list will be submitted).

The id attribute is needed to associate the drop-down list with a label.

The <option> tags inside the <select> element define the available options in the drop-down list.

Tip: Always add the <label> tag for best accessibility practices!

Browser Support Element
<select> Yes Yes Yes Yes Yes

Attributes Attribute Value Description autofocus autofocus Specifies that the drop-down list should automatically get focus when the page loads disabled disabled Specifies that a drop-down list should be disabled form form_id Defines which form the drop-down list belongs to multiple multiple Specifies that multiple options can be selected at once name name Defines a name for the drop-down list required required Specifies that the user is required to select a value before submitting the form size number Defines the number of visible options in a drop-down list Global Attributes The <select> tag also supports the Global Attributes in HTML.

Event Attributes The <select> tag also supports the Event Attributes in HTML.

More Examples Example Use <select> with <optgroup> tags:

<label for="cars">Choose a car:</label> <select name="cars" id="cars"> <optgroup label="Swedish Cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> </optgroup> <optgroup label="German Cars"> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </optgroup> </select> Related Pages HTML DOM reference: Select Object

CSS Tutorial: Styling Forms

Default CSS Settings None.




<!DOCTYPE html> <html> <body>

<h1>The select element</h1>

<p>The select element is used to create a drop-down list.</p>

<form action="/action_page.php"> <label for="cars">Choose a car:</label> <select name="cars" id="cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="opel">Opel</option> <option value="audi">Audi</option> </select> <br><br> <input type="submit" value="Submit"> </form>

<p>Click the "Submit" button and the form-data will be sent to a page on the server called "action_page.php".</p>

</body> </html>

<!DOCTYPE html> <html> <body>

<h1>The optgroup element</h1>

<p>The optgroup tag is used to group related options in a drop-down list:</p>

<form action="/action_page.php"> <label for="cars">Choose a car:</label> <select name="cars" id="cars"> <optgroup label="Swedish Cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> </optgroup> <optgroup label="German Cars"> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </optgroup> </select> <br><br> <input type="submit" value="Submit"> </form>

</body> </html>
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HTML <small> Tag

Example Define a smaller text:

<p>This is some normal text.</p> <p><small>This is some smaller text.</small></p> More "Try it Yourself" examples below.

Definition and Usage The <small> tag defines smaller text (like copyright and other side-comments).

Tip: This tag is not deprecated, but it is possible to achieve richer (or the same) effect with CSS.

Browser Support Element
<small> Yes Yes Yes Yes Yes Global Attributes The <small> tag also supports the Global Attributes in HTML.

Event Attributes The <small> tag also supports the Event Attributes in HTML.

More Examples Example Use CSS to define smaller text:

<html> <head> <style> span.small { font-size: smaller; } </style> </head> <body>

<p>This is some normal text.</p> <p><span class="small">This is some smaller text.</span></p>

</body> </html> Related Pages HTML tutorial: HTML Text Formatting

HTML DOM reference: Small Object

Default CSS Settings Most browsers will display the <small> element with the following default values:

Example small { font-size: smaller; }








<!DOCTYPE html> <html> <body>

<h1>The small element</h1>

<p>This is some normal text.</p> <p><small>This is some smaller text.</small></p>

</body> </html>

<!DOCTYPE html> <html> <head> <style> span.small { font-size: smaller; } </style> </head> <body>

<h1>Use CSS to define smaller text</h1>

<p>This is some normal text.</p> <p><span class="small">This is some smaller text.</span></p>

</body> </html>

<!DOCTYPE html> <html> <head> <style> small { font-size: smaller; } </style> </head> <body>

<p>A small element is displayed like this:</p>

<small>Some smaller text</small>

<p>Change the default CSS settings to see the effect.</p>

</body> </html>
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HTML <source> Tag

Example An audio player with two source files. The browser will choose the first <source> it supports:

<audio controls> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio> More "Try it Yourself" examples below.

Definition and Usage The <source> tag is used to specify multiple media resources for media elements, such as <video>, <audio>, and <picture>.

The <source> tag allows you to specify alternative video/audio/image files which the browser may choose from, based on browser support or viewport width. The browser will choose the first <source> it supports.

Browser Support The numbers in the table specify the first browser version that fully supports the element.

Element
<source> 4.0 9.0 3.5 4.0 10.5 Attributes Attribute Value Description media media_query Accepts any valid media query that would normally be defined in a CSS sizes Specifies image sizes for different page layouts src URL Required when <source> is used in <audio> and <video>. Specifies the URL of the media file srcset URL Required when <source> is used in <picture>. Specifies the URL of the image to use in different situations type MIME-type Specifies the MIME-type of the resource

Global Attributes The <source> tag also supports the Global Attributes in HTML.

Event Attributes The <source> tag also supports the Event Attributes in HTML.

More Examples Example Use <source> within <video> to play a video:

<video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> Your browser does not support the video tag. </video> Example Use <source> within <picture> to define different images based on the viewport width:

<picture> <source media="(min-width:650px)" srcset="imgpinkflowers.jpg"> <source media="(min-width:465px)" srcset="imgwhiteflower.jpg"> <img src="imgorangeflowers.jpg" alt="Flowers" style="width:auto;"> </picture> Related Pages HTML tutorial: HTML Video

HTML tutorial: HTML Audio

HTML DOM reference: Source Object

Default CSS Settings None.



<!DOCTYPE html> <html> <body>

<h1>The source element</h1>

<p>Click on the play button to play a sound:</p>

<audio controls> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio>

</body> </html>

<!DOCTYPE html> <html> <body>

<h1>The video element</h1>

<video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> Your browser does not support the video tag. </video>

</body> </html>

<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body>

<h1>The picture element</h1>

<p>Resize the browser window to load different images.</p>

<picture> <source media="(min-width:650px)" srcset="imgpinkflowers.jpg"> <source media="(min-width:465px)" srcset="imgwhiteflower.jpg"> <img src="imgorangeflowers.jpg" alt="Flowers" style="width:auto;"> </picture>

</body> </html>



xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx



https://www.w3schools.com/tags/tag_span.asp






HTML <span> Tag

Example A <span> element which is used to color a part of a text:

<p>My mother has <span style="color:blue">blue</span> eyes.</p> Definition and Usage The <span> tag is an inline container used to mark up a part of a text, or a part of a document.

The <span> tag is easily styled by CSS or manipulated with JavaScript using the class or id attribute.

The <span> tag is much like the <div> element, but <div> is a block-level element and <span> is an inline element.

Browser Support Element
<span> Yes Yes Yes Yes Yes Global Attributes The <span> tag also supports the Global Attributes in HTML.

Event Attributes The <span> tag also supports the Event Attributes in HTML.

Related Pages HTML tutorial: HTML Block and Inline Elements

HTML DOM reference: Span Object

Default CSS Settings None.





<!DOCTYPE html> <html> <body>

<h1>The span element</h1>

<p>My mother has <span style="color:blue;font-weight:bold">blue</span> eyes and my father has <span style="color:darkolivegreen;font-weight:bold">dark green</span> eyes.</p>

</body> </html>
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HTML <strike> Tag Not Supported in HTML5. The <strike> tag was used in HTML 4 to define strikethrough text.

What to Use Instead? Example Use the <del> tag to define deleted text:

<p>My favorite color is <del>blue</del> <ins>red</ins>!</p> Example Use the <s> tag to mark up text that is no longer correct:

<p><s>My car is blue.</s></p>




<!DOCTYPE html> <html> <body>

<h1>The del element</h1>

<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>

</body> </html>

<!DOCTYPE html> <html> <body>

<h1>The s element</h1>

<p><s>Only 50 tickets left!</s></p> <p>SOLD OUT!</p>

</body> </html>
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HTML <strong> Tag

Example Define important text in a document:

<strong>This text is important!</strong> Definition and Usage The <strong> tag is used to define text with strong importance. The content inside is typically displayed in bold.

Tip: Use the <b> tag to specify bold text without any extra importance!

Browser Support Element
<strong> Yes Yes Yes Yes Yes Global Attributes The <strong> tag also supports the Global Attributes in HTML.

Event Attributes The <strong> tag also supports the Event Attributes in HTML.

Related Pages HTML tutorial: HTML Text Formatting

HTML DOM reference: Strong Object

Default CSS Settings Most browsers will display the <strong> element with the following default values:

Example strong { font-weight: bold; }






<!DOCTYPE html> <html> <body>

<h1>The strong element</h1>

<p>This text is normal.</p>

<p><strong>This text is important!</strong></p>

</body> </html>

<!DOCTYPE html> <html> <head> <style> strong { font-weight: bold; } </style> </head> <body>

<p>A strong element is displayed like this:</p>

<strong>Some important text</strong>

<p>Change the default CSS settings to see the effect.</p>

</body> </html>
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HTML <style> Tag

Example Use of the <style> element to apply a simple style sheet to an HTML document:

<html> <head> <style> h1 {color:red;} p {color:blue;} </style> </head> <body>

<h1>A heading</h1> <p>A paragraph.</p>

</body> </html> More "Try it Yourself" examples below.

Definition and Usage The <style> tag is used to define style information (CSS) for a document.

Inside the <style> element you specify how HTML elements should render in a browser.

Tips and Notes Note: When a browser reads a style sheet, it will format the HTML document according to the information in the style sheet. If some properties have been defined for the same selector (element) in different style sheets, the value from the last read style sheet will be used (see example below)!

Tip: To link to an external style sheet, use the <link> tag.

Tip: To learn more about style sheets, please read our CSS Tutorial.

Browser Support Element
<style> Yes Yes Yes Yes Yes

Attributes Attribute Value Description media media_query Specifies what media/device the media resource is optimized for type text/css Specifies the media type of the <style> tag Global Attributes The <style> tag also supports the Global Attributes in HTML.

Event Attributes The <style> tag also supports the Event Attributes in HTML.

More Examples Example Multiple styles for the same elements:

<html> <head> <style> h1 {color:red;} p {color:blue;} </style> <style> h1 {color:green;} p {color:pink;} </style> </head> <body>

<h1>This is a heading</h1> <p>This is a paragraph.</p>

</body> </html> Related Pages HTML tutorial: HTML CSS

CSS tutorial: CSS Tutorial

HTML DOM reference: Style Object

Default CSS Settings Most browsers will display the <style> element with the following default values:

style { display: none; }





<!DOCTYPE html> <html> <head> <style> h1 {color:red;} p {color:blue;} </style> </head> <body>

<h1>This is a heading</h1> <p>This is a paragraph.</p>

</body> </html>

<!DOCTYPE html> <html> <head> <style> h1 {color:red;} p {color:blue;} </style> <style> h1 {color:green;} p {color:pink;} </style> </head> <body>

<h1>This is a heading</h1> <p>This is a paragraph.</p>

<p>Notice that if some properties have been defined for the same selector (element) in different style sheets, the value from the last read style sheet will be used!</p>

</body> </html>
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HTML <sub> Tag

Example Subscript text:

<p>This text contains <sub>subscript</sub> text.</p> Definition and Usage The <sub> tag defines subscript text. Subscript text appears half a character below the normal line, and is sometimes rendered in a smaller font. Subscript text can be used for chemical formulas, like H2O.

Tip: Use the <sup> tag to define superscripted text.

Browser Support Element
<sub> Yes Yes Yes Yes Yes Global Attributes The <sub> tag also supports the Global Attributes in HTML.

Event Attributes The <sub> tag also supports the Event Attributes in HTML.

Related Pages HTML tutorial: HTML Text Formatting

HTML DOM reference: Subscript Object

Default CSS Settings Most browsers will display the <sub> element with the following default values:

Example sub { vertical-align: sub; font-size: smaller; }





<!DOCTYPE html> <html> <body>

<h1>The sub and sup elements</h1>

<p>This text contains <sub>subscript</sub> text.</p> <p>This text contains <sup>superscript</sup> text.</p>

</body> </html>

<!DOCTYPE html> <html> <head> <style> sub { vertical-align: sub; font-size: smaller; } </style> </head> <body>

<p>A sub element is displayed like this:</p>

<p>This text contains <sub>subscript text</sub></p>

<p>Change the default CSS settings to see the effect.</p>

</body> </html>
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HTML <summary> Tag

Example Using the <summary> element:

<details> <summary>Epcot Center</summary> <p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p> </details> More "Try it Yourself" examples below.

Definition and Usage The <summary> tag defines a visible heading for the <details> element. The heading can be clicked to view/hide the details.

Note: The <summary> element should be the first child element of the <details> element.

Browser Support The numbers in the table specify the first browser version that fully supports the element.

Element
<summary> 12.0 79.0 49.0 6.0 15.0 Global Attributes The <summary> tag also supports the Global Attributes in HTML.

Event Attributes The <summary> tag also supports the Event Attributes in HTML.

More Examples Example Use CSS to style <details> and <summary>:

<html> <style> details > summary { padding: 4px; width: 200px; background-color: #eeeeee; border: none; box-shadow: 1px 1px 2px #bbbbbb; cursor: pointer; }

details > p { background-color: #eeeeee; padding: 4px; margin: 0; box-shadow: 1px 1px 2px #bbbbbb; } </style> <body>

<details> <summary>Epcot Center</summary> <p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p> </details>

</body> </html> Related Pages HTML DOM reference: Summary Object

Default CSS Settings Most browsers will display the <summary> element with the following default values:

summary { display: block; }






<!DOCTYPE html> <html> <body>

<h1>The summary element</h1>

<details> <summary>Epcot Center</summary> <p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p> </details>

</body> </html>

<!DOCTYPE html> <html> <head> <style> details > summary { padding: 4px; width: 200px; background-color: #eeeeee; border: none; box-shadow: 1px 1px 2px #bbbbbb; cursor: pointer; }

details > p { background-color: #eeeeee; padding: 4px; margin: 0; box-shadow: 1px 1px 2px #bbbbbb; } </style> </head> <body>

<h1>The details and summary elements + CSS</h1>

<details> <summary>Epcot Center</summary> <p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p> </details>

</body> </html>
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HTML <sup> Tag

Example Superscript text:

<p>This text contains <sup>superscript</sup> text.</p> Definition and Usage The <sup> tag defines superscript text. Superscript text appears half a character above the normal line, and is sometimes rendered in a smaller font. Superscript text can be used for footnotes, like WWW[1].

Tip: Use the <sub> tag to define subscript text.

Browser Support Element
<sup> Yes Yes Yes Yes Yes Global Attributes The <sup> tag also supports the Global Attributes in HTML.

Event Attributes The <sup> tag also supports the Event Attributes in HTML.

Related Pages HTML tutorial: HTML Text Formatting

HTML DOM reference: Superscript Object

Default CSS Settings Most browsers will display the <sup> element with the following default values:

Example sup { vertical-align: super; font-size: smaller; }





<!DOCTYPE html> <html> <body>

<h1>The sub and sup elements</h1>

<p>This text contains <sub>subscript</sub> text.</p> <p>This text contains <sup>superscript</sup> text.</p>

</body> </html>

<!DOCTYPE html> <html> <head> <style> sup { vertical-align: super; font-size: smaller; } </style> </head> <body>

<p>A sup element is displayed like this:</p>

<p>This text contains <sup>superscript text</sup></p>

<p>Change the default CSS settings to see the effect.</p>

</body> </html>
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HTML <svg> Tag

Example Draw a circle:

<svg width="100" height="100"> <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" /> </svg> More "Try it Yourself" examples below.

Definition and Usage The <svg> tag defines a container for SVG graphics.

SVG has several methods for drawing paths, boxes, circles, text, and graphic images.

To learn more about SVG, please read our SVG Tutorial.

Browser Support Element
<svg> 4.0 9.0 3.0 3.2 10.1 More Examples Example Draw a rectangle:

<svg width="400" height="100"> <rect width="400" height="100" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" /> </svg> Example Draw a square with rounded corners:

<svg width="400" height="180"> <rect x="50" y="20" rx="20" ry="20" width="150" height="150" style="fill:red;stroke:black;stroke-width:5;opacity:0.5" /> </svg> Example Draw a star:

<svg width="300" height="200"> <polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" /> </svg> Example Draw an SVG logo:

<svg height="130" width="500"> <defs> <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" /> <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" /> </linearGradient> </defs>

<ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)" />

<text fill="#ffffff" font-size="45" font-family="Verdana" x="50" y="86">SVG</text> </svg> Related Pages HTML tutorial: HTML SVG

SVG tutorial: SVG Tutorial
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<!DOCTYPE html> <html> <body>

<h1>The svg element</h1>

<svg width="100" height="100"> <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" /> Sorry, your browser does not support inline SVG. </svg>

</body> </html>

<!DOCTYPE html> <html> <body>

<h1>The svg element</h1>

<svg width="400" height="100"> <rect width="400" height="100" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" /> Sorry, your browser does not support inline SVG. </svg>

</body> </html>

<!DOCTYPE html> <html> <body>

<h1>The svg element</h1>

<svg width="400" height="180"> <rect x="50" y="20" rx="20" ry="20" width="150" height="150" style="fill:red;stroke:black;stroke-width:5;opacity:0.5" /> Sorry, your browser does not support inline SVG. </svg>

</body> </html>

<!DOCTYPE html> <html> <body>

<h1>The svg element</h1>

<svg width="300" height="200"> <polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" /> Sorry, your browser does not support inline SVG. </svg>

</body> </html>

<!DOCTYPE html> <html> <body>

<h1>The svg element</h1>

<svg height="130" width="500"> <defs> <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" /> <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" /> </linearGradient> </defs> <ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)" /> <text fill="#ffffff" font-size="45" font-family="Verdana" x="50" y="86">SVG</text> Sorry, your browser does not support inline SVG. </svg>

</body> </html>
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HTML <table> Tag

Example A simple HTML table, containing two columns and two rows:

<table> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> </table> More "Try it Yourself" examples below.

Definition and Usage The <table> tag defines an HTML table.

An HTML table consists of one <table> element and one or more <tr>, <th>, and <td> elements.

The <tr> element defines a table row, the <th> element defines a table header, and the <td> element defines a table cell.

An HTML table may also include <caption>, <colgroup>, <thead>, <tfoot>, and <tbody> elements.

Browser Support Element
<table> Yes Yes Yes Yes Yes Global Attributes The <table> tag also supports the Global Attributes in HTML.

Event Attributes The <table> tag also supports the Event Attributes in HTML.

More Examples Example How to add collapsed borders to a table (with CSS):

<html> <head> <style> table, th, td { border: 1px solid black; border-collapse: collapse; } </style> </head> <body>

<table> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$80</td> </tr> </table>

</body> </html> Example How to right-align a table (with CSS):

<table style="float:right"> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$80</td> </tr> </table> Example How to center-align a table (with CSS):

<html> <head> <style> table, th, td { border: 1px solid black; } table.center { margin-left: auto; margin-right: auto; } </style> </head> <body>

<table class="center"> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$80</td> </tr> </table> Example How to add background-color to a table (with CSS):

<table style="background-color:#00FF00"> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$80</td> </tr> </table> Example How to add padding to a table (with CSS):

<html> <head> <style> table, th, td { border: 1px solid black; }

th, td { padding: 10px; } </style> </head> <body>

<table> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$80</td> </tr> </table>

</body> </html> Example How to set table width (with CSS):

<table style="width:400px"> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$80</td> </tr> </table> Example How to create table headers:

<table> <tr> <th>Name</th> <th>Email</th> <th>Phone</th> </tr> <tr> <td>John Doe</td> <td>john.doe@example.com</td> <td>123-45-678</td> </tr> </table> Example How to create a table with a caption:

<table> <caption>Monthly savings</caption> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$80</td> </tr> </table> Example How to define table cells that span more than one row or one column:

<table> <tr> <th>Name</th> <th>Email</th> <th colspan="2">Phone</th> </tr> <tr> <td>John Doe</td> <td>john.doe@example.com</td> <td>123-45-678</td> <td>212-00-546</td> </tr> </table> Related Pages HTML tutorial: HTML Tables

HTML DOM reference: Table Object

CSS Tutorial: Styling Tables

Default CSS Settings Most browsers will display the <table> element with the following default values:

Example table { display: table; border-collapse: separate; border-spacing: 2px; border-color: gray; }
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<!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid black; } </style> </head> <body>

<h1>The table element</h1>

<table> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$80</td> </tr> </table>

</body> </html>

<!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid black; border-collapse: collapse; } </style> </head> <body>

<h1>Table with Collapsed Borders</h1>

<table> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$80</td> </tr> </table>

</body> </html>

<!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid black; } </style> </head> <body>

<h1>Right-align a Table</h1>

<table style="float:right"> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$80</td> </tr> </table> <p>This is some text to be wrapped around the table. This is some text to be wrapped around the table. This is some text to be wrapped around the table.</p>

</body> </html>

<!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid black; } table.center { margin-left: auto; margin-right: auto; } </style> </head> <body>

<h1>Center a Table</h1> <p>To center a table, set left and right margin to auto:</p>

<table class="center"> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$80</td> </tr> </table>

</body> </html>

<!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid black; } </style> </head> <body>

<h1>Add Background Color to a Table</h1>

<table style="background-color:#00FF00"> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$80</td> </tr> </table>

</body> </html>

<!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid black; }

th, td { padding: 10px; } </style> </head> <body>

<h1>Add Padding to a Table</h1>

<table> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr>   <tr>     <td>February</td>     <td>$80</td>   </tr> </table>

</body> </html>

<!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid black; } </style> </head> <body>

<h1>Add a Specific Width to a Table</h1>

<table style="width:400px"> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$80</td> </tr> </table>

</body> </html>

<!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid black; } </style> </head> <body>

<h1>Table Headers</h1>

<h2>Horizontal headers:</h2> <table> <tr> <th>Name</th> <th>Email</th> <th>Phone</th>
</tr> <tr> <td>John Doe</td> <td>john.doe@example.com</td>
<td>123-45-678</td> </tr> </table>

<h2>Vertical headers:</h2> <table> <tr> <th>Name:</th> <td>John Doe</td> </tr> <tr> <th>Email:</th>
<td>john.doe@example.com</td>
</tr>
<tr> <th>Phone:</th> <td>123-45-678</td> </tr> </table>

</body> </html>

<!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid black; } </style> </head> <body>

<h1>The caption element</h1>

<table> <caption>Monthly savings</caption> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$50</td> </tr> </table>

</body> </html>

<!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid black; } </style> </head> <body>

<h1>Colspan and rowspan</h1>

<h3>Cell that spans two columns:</h3> <table> <tr> <th>Name</th> <th>Email</th> <th colspan="2">Phone</th>
</tr> <tr> <td>John Doe</td> <td>john.doe@example.com</td>
<td>123-45-678</td> <td>212-00-546</td>
</tr> </table>

<h3>Cell that spans two rows:</h3> <table> <tr> <th>Name:</th> <td>John Doe</td> </tr> <tr> <th>Email:</th>
<td>john.doe@example.com</td>
</tr>
<tr> <th rowspan="2">Phone:</th> <td>123-45-678</td> </tr> <tr> <td>212-00-546</td> </tr> </table>

</body> </html>

<!DOCTYPE html> <html> <head> <style> table { display: table; border-collapse: separate; border-spacing: 2px; border-color: gray; } </style> </head> <body>

<table> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$80</td> </tr> </table>

</body> </html>
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HTML <tbody> Tag

Example An HTML table with a <thead>, <tbody>, and a <tfoot> element:

<table> <thead> <tr> <th>Month</th> <th>Savings</th> </tr> </thead> <tbody> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$80</td> </tr> </tbody> <tfoot> <tr> <td>Sum</td> <td>$180</td> </tr> </tfoot> </table> More "Try it Yourself" examples below.

Definition and Usage The <tbody> tag is used to group the body content in an HTML table.

The <tbody> element is used in conjunction with the <thead> and <tfoot> elements to specify each part of a table (body, header, footer).

Browsers can use these elements to enable scrolling of the table body independently of the header and footer. Also, when printing a large table that spans multiple pages, these elements can enable the table header and footer to be printed at the top and bottom of each page.

Note: The <tbody> element must have one or more <tr> tags inside.

The <tbody> tag must be used in the following context: As a child of a <table> element, after any <caption>, <colgroup>, and <thead> elements.

Tip: The <thead>, <tbody>, and <tfoot> elements will not affect the layout of the table by default. However, you can use CSS to style these elements (see example below)!

Browser Support Element
<tbody> Yes Yes Yes Yes Yes Global Attributes The <tbody> tag also supports the Global Attributes in HTML.

Event Attributes The <tbody> tag also supports the Event Attributes in HTML.

More Examples Example Style <thead>, <tbody>, and <tfoot> with CSS:

<html> <head> <style> thead {color: green;} tbody {color: blue;} tfoot {color: red;}

table, th, td { border: 1px solid black; } </style> </head> <body>

<table> <thead> <tr> <th>Month</th> <th>Savings</th> </tr> </thead> <tbody> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$80</td> </tr> </tbody> <tfoot> <tr> <td>Sum</td> <td>$180</td> </tr> </tfoot> </table> Example How to align content inside <tbody> (with CSS):

<table style="width:100%"> <thead> <tr> <th>Month</th> <th>Savings</th> </tr> </thead> <tbody style="text-align:right"> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$80</td> </tr> </tbody> </table> Example How to vertical align content inside <tbody> (with CSS):

<table style="width:50%;"> <tr> <th>Month</th> <th>Savings</th> </tr> <tbody style="vertical-align:bottom"> <tr style="height:100px"> <td>January</td> <td>$100</td> </tr> <tr style="height:100px"> <td>February</td> <td>$80</td> </tr> </tbody> </table> Default CSS Settings Most browsers will display the <tbody> element with the following default values:

tbody { display: table-row-group; vertical-align: middle; border-color: inherit; }
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<!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid black; } </style> </head> <body>

<h1>The thead, tbody, and tfoot elements</h1>

<table> <thead> <tr> <th>Month</th> <th>Savings</th> </tr> </thead> <tbody> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$80</td> </tr> </tbody> <tfoot> <tr> <td>Sum</td> <td>$180</td> </tr> </tfoot> </table>

</body> </html>

<!DOCTYPE html> <html> <head> <style> thead {color:green;} tbody {color:blue;} tfoot {color:red;}

table, th, td { border: 1px solid black; } </style> </head> <body>

<h1>The thead, tbody, and tfoot elements - Styled with CSS</h1>

<table> <thead> <tr> <th>Month</th> <th>Savings</th> </tr> </thead> <tbody> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$80</td> </tr> </tbody> <tfoot> <tr> <td>Sum</td> <td>$180</td> </tr> </tfoot> </table>

</body> </html>

<!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid black; } </style> </head> <body>

<h1>Right-align content in tbody</h1>

<table style="width:100%"> <thead> <tr> <th>Month</th> <th>Savings</th> </tr> </thead> <tbody style="text-align:right"> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$80</td> </tr> </tbody> </table>

</body> </html>

<!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid black; } </style> </head> <body>

<h1>Vertical-align content in tbody</h1>

<table style="width:50%;"> <tr> <th>Month</th> <th>Savings</th> </tr> <tbody style="vertical-align:bottom"> <tr style="height:100px"> <td>January</td> <td>$100</td> </tr> <tr style="height:100px"> <td>February</td> <td>$80</td> </tr> </tbody>
</table>

</body> </html>
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HTML <td> Tag

Example A simple HTML table, with two rows and four table cells:

<table> <tr> <td>Cell A</td> <td>Cell B</td> </tr> <tr> <td>Cell C</td> <td>Cell D</td> </tr> </table> More "Try it Yourself" examples below.

Definition and Usage The <td> tag defines a standard data cell in an HTML table.

An HTML table has two kinds of cells:

Header cells - contains header information (created with the <th> element) Data cells - contains data (created with the <td> element) The text in <td> elements are regular and left-aligned by default.

The text in <th> elements are bold and centered by default.

Browser Support Element
<td> Yes Yes Yes Yes Yes Attributes Attribute Value Description colspan number Specifies the number of columns a cell should span headers header_id Specifies one or more header cells a cell is related to rowspan number Sets the number of rows a cell should span Global Attributes The <td> tag also supports the Global Attributes in HTML.

Event Attributes The <td> tag also supports the Event Attributes in HTML.

More Examples Example How to align content inside <td> (with CSS):

<table style="width:100%"> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td style="text-align:right">$100</td> </tr> <tr> <td>February</td> <td style="text-align:right">$80</td> </tr> </table> Example How to add background-color to table cell (with CSS):

<table> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td style="background-color:#FF0000">January</td> <td style="background-color:#00FF00">$100</td> </tr> </table> Example How to set the height of a table cell (with CSS):

<table> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td style="height:100px">January</td> <td style="height:100px">$100</td> </tr> </table> Example How to specify no word-wrapping in table cell (with CSS):

<table> <tr> <th>Poem</th> </tr> <tr> <td style="white-space:nowrap">Never increase, beyond what is necessary, the number of entities required to explain anything</td> </tr> </table> Example How to vertical align content inside <td> (with CSS):

<table style="width:50%;"> <tr> <th>Month</th> <th>Savings</th> </tr> <tr style="height:100px"> <td style="vertical-align:bottom">January</td> <td style="vertical-align:bottom">$100</td> </tr> </table> Example How to set the width of a table cell (with CSS):

<table style="width:100%"> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td style="width:70%">January</td> <td style="width:30%">$100</td> </tr> </table> Example How to create table headers:

<table> <tr> <th>Name</th> <th>Email</th> <th>Phone</th> </tr> <tr> <td>John Doe</td> <td>john.doe@example.com</td> <td>123-45-678</td> </tr> </table> Example How to create a table with a caption:

<table> <caption>Monthly savings</caption> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$80</td> </tr> </table> Example How to define table cells that span more than one row or one column:

<table> <tr> <th>Name</th> <th>Email</th> <th colspan="2">Phone</th> </tr> <tr> <td>John Doe</td> <td>john.doe@example.com</td> <td>123-45-678</td> <td>212-00-546</td> </tr> </table> Related Pages HTML tutorial: HTML Tables

HTML DOM reference: TableData Object

CSS Tutorial: Styling Tables

Default CSS Settings Most browsers will display the <td> element with the following default values:

td { display: table-cell; vertical-align: inherit; }

COLOR PICKER colorpicker LIKE US

HOW TO Tabs Dropdowns Accordions Side Navigation Top Navigation Modal Boxes Progress Bars Parallax Login Form HTML Includes Google Maps Range Sliders Tooltips Slideshow Filter List Sort List Certificates

Top Tutorials HTML Tutorial CSS Tutorial JavaScript Tutorial How To Tutorial SQL Tutorial Python Tutorial W3.CSS Tutorial Bootstrap Tutorial PHP Tutorial Java Tutorial C++ Tutorial jQuery Tutorial Top References HTML Reference CSS Reference JavaScript Reference SQL Reference Python Reference W3.CSS Reference Bootstrap Reference PHP Reference HTML Colors Java Reference Angular Reference jQuery Reference Top Examples HTML Examples CSS Examples JavaScript Examples How To Examples SQL Examples Python Examples W3.CSS Examples Bootstrap Examples PHP Examples Java Examples XML Examples jQuery Examples Web Certificates HTML Certificate CSS Certificate JavaScript Certificate SQL Certificate Python Certificate PHP Certificate Bootstrap Certificate XML Certificate jQuery Certificate W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Copyright 1999-2021 by Refsnes Data. All Rights Reserved. W3Schools is Powered by W3.CSS.

W3Schools.com

<!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid black; } </style> </head> <body>

<h1>The td element</h1>

<p>The td element defines a cell in a table:</p>

<table> <tr> <td>Cell A</td> <td>Cell B</td> </tr> <tr> <td>Cell C</td> <td>Cell D</td> </tr> </table>

</body> </html>

<!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid black; } </style> </head> <body>

<h1>The td element</h1>

<p>The td element defines a cell in a table:</p>

<table> <tr> <td>Cell A</td> <td>Cell B</td> </tr> <tr> <td>Cell C</td> <td>Cell D</td> </tr> </table>

</body> </html>

<!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid black; } </style> </head> <body>

<h1>Right-align content in some data cells</h1>

<table style="width:100%"> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td style="text-align:right">$100</td> </tr> <tr> <td>February</td> <td style="text-align:right">$80</td> </tr> </table>

</body> </html>

<!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid black; } </style> </head> <body>

<h1>Add Background Color to td</h1>

<table> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td style="background-color:#FF0000">January</td> <td style="background-color:#00FF00">$100</td> </tr> </table>

</body> </html>

<!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid black; } </style> </head> <body>

<h1>Add Specific Height to td</h1>

<table> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td style="height:100px">January</td> <td style="height:100px">$100</td> </tr> <tr> <td>February</td> <td>$80</td> </tr> </table>

</body> </html>

<!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid black; } </style> </head> <body>

<h1>Add Nowrap to td</h1>

<table> <tr> <th>Poem</th> </tr> <tr> <td style="white-space:nowrap">Never increase, beyond what is necessary, the number of entities required to explain anything</td> </tr> </table>

</body> </html>

<!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid black; } </style> </head> <body>

<h1>Vertical-align content in td</h1>

<table style="width:50%;"> <tr> <th>Month</th> <th>Savings</th> </tr> <tr style="height:100px"> <td style="vertical-align:bottom">January</td> <td style="vertical-align:bottom">$100</td> </tr> </table>

</body> </html>

<!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid black; } </style> </head> <body>

<h1>Add a width i percent for tds</h1>

<table style="width:100%"> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td style="width:70%">January</td> <td style="width:30%">$100</td> </tr> <tr> <td>February</td> <td>$80</td> </tr> </table>

</body> </html>

<!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid black; } </style> </head> <body>

<h1>Table Headers</h1>

<h2>Horizontal headers:</h2> <table> <tr> <th>Name</th> <th>Email</th> <th>Phone</th>
</tr> <tr> <td>John Doe</td> <td>john.doe@example.com</td>
<td>123-45-678</td> </tr> </table>

<h2>Vertical headers:</h2> <table> <tr> <th>Name:</th> <td>John Doe</td> </tr> <tr> <th>Email:</th>
<td>john.doe@example.com</td>
</tr>
<tr> <th>Phone:</th> <td>123-45-678</td> </tr> </table>

</body> </html>

<!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid black; } </style> </head> <body>

<h1>The caption element</h1>

<table> <caption>Monthly savings</caption> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$50</td> </tr> </table>

</body> </html>

<!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid black; } </style> </head> <body>

<h1>Colspan and rowspan</h1>

<h3>Cell that spans two columns:</h3> <table> <tr> <th>Name</th> <th>Email</th> <th colspan="2">Phone</th>
</tr> <tr> <td>John Doe</td> <td>john.doe@example.com</td>
<td>123-45-678</td> <td>212-00-546</td>
</tr> </table>

<h3>Cell that spans two rows:</h3> <table> <tr> <th>Name:</th> <td>John Doe</td> </tr> <tr> <th>Email:</th>
<td>john.doe@example.com</td>
</tr>
<tr> <th rowspan="2">Phone:</th> <td>123-45-678</td> </tr> <tr> <td>212-00-546</td> </tr> </table>

</body> </html>
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HTML <template> Tag

Example Use <template> to hold some content that will be hidden when the page loads. Use JavaScript to display it:

<button onclick="showContent()">Show hidden content</button>

<template> <h2>Flower</h2> <img src="imgwhiteflower.jpg" width="214" height="204"> </template>

<script> function showContent() { var temp = document.getElementsByTagName("template")[0]; var clon = temp.content.cloneNode(true); document.body.appendChild(clon); } </script> More "Try it Yourself" examples below.

Definition and Usage The <template> tag is used as a container to hold some HTML content hidden from the user when the page loads.

The content inside <template> can be rendered later with a JavaScript.

You can use the <template> tag if you have some HTML code you want to use over and over again, but not until you ask for it. To do this without the <template> tag, you have to create the HTML code with JavaScript to prevent the browser from rendering the code.

Browser Support Element
<template> 26.0 13.0 22.0 8.0 15.0 Global Attributes The <template> tag supports the Global Attributes in HTML.

More Examples Example Fill the web page with one new div element for each item in an array. The HTML code of each div element is inside the template element:

<template> <div class="myClass">I like: </div> </template>

<script> var myArr = ["Audi", "BMW", "Ford", "Honda", "Jaguar", "Nissan"]; function showContent() { var temp, item, a, i; temp = document.getElementsByTagName("template")[0]; item = temp.content.querySelector("div"); for (i = 0; i < myArr.length; i++) { a = document.importNode(item, true); a.textContent += myArr[i]; document.body.appendChild(a); } } </script> Example Check browser support for <template>:

<script> if (document.createElement("template").content) { document.write("Your browser supports template!"); } else { document.write("Your browser does not supports template!"); } </script>





<!DOCTYPE html> <html> <body>

<h1>The template Element</h1>

<p>Click the button below to display the hidden content from the template element.</p>

<button onclick="showContent()">Show hidden content</button>

<template> <h2>Flower</h2> <img src="imgwhiteflower.jpg" width="214" height="204"> </template>

<script> function showContent() { var temp = document.getElementsByTagName("template")[0]; var clon = temp.content.cloneNode(true); document.body.appendChild(clon); } </script>

</body> </html>

<!DOCTYPE html> <html> <body> <style> .myClass { color: white; background-color: DodgerBlue; padding: 20px; text-align: center; margin: 10px; } </style>

<h1>The template Element</h1>

<p>This example fills the web page with one new div element for each item in an array.</p> <p>The HTML code of each div element is inside the template element.</p>

<p>Click the button below to display the hidden content from the template element.</p>

<button onclick="showContent()">Show hidden content</button>

<template> <div class="myClass">I like: </div> </template>

<script> var myArr = ["Audi", "BMW", "Ford", "Honda", "Jaguar", "Nissan"];

function showContent() { var temp, item, a, i; temp = document.getElementsByTagName("template")[0]; //get the div element from the template: item = temp.content.querySelector("div"); //for each item in the array: for (i = 0; i < myArr.length; i++) { //Create a new node, based on the template: a = document.importNode(item, true); //Add data from the array: a.textContent += myArr[i]; //append the new node wherever you like: document.body.appendChild(a); } } </script>

</body> </html>

<!DOCTYPE html> <html> <body>

<h1>Test template Support</h1>

<script> if (document.createElement("template").content) { document.write("Your browser supports template!"); } else { document.write("Your browser does not supports template!"); } </script>

</body> </html>
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HTML <textarea> Tag

Example A multi-line text input control (text area):

<label for="w3review">Review of W3Schools:</label>

<textarea id="w3review" name="w3review" rows="4" cols="50"> At w3schools.com you will learn how to make a website. They offer free tutorials in all web development technologies. </textarea> More "Try it Yourself" examples below.

Definition and Usage The <textarea> tag defines a multi-line text input control.

The <textarea> element is often used in a form, to collect user inputs like comments or reviews.

A text area can hold an unlimited number of characters, and the text renders in a fixed-width font (usually Courier).

The size of a text area is specified by the <cols> and <rows> attributes (or with CSS).

The name attribute is needed to reference the form data after the form is submitted (if you omit the name attribute, no data from the text area will be submitted).

The id attribute is needed to associate the text area with a label.

Tip: Always add the <label> tag for best accessibility practices!

Browser Support Element
<textarea> Yes Yes Yes Yes Yes

Attributes Attribute Value Description autofocus autofocus Specifies that a text area should automatically get focus when the page loads cols number Specifies the visible width of a text area dirname textareaname.dir Specifies that the text direction of the textarea will be submitted disabled disabled Specifies that a text area should be disabled form form_id Specifies which form the text area belongs to maxlength number Specifies the maximum number of characters allowed in the text area name text Specifies a name for a text area placeholder text Specifies a short hint that describes the expected value of a text area readonly readonly Specifies that a text area should be read-only required required Specifies that a text area is required/must be filled out rows number Specifies the visible number of lines in a text area wrap hard soft Specifies how the text in a text area is to be wrapped when submitted in a form Global Attributes The <textarea> tag also supports the Global Attributes in HTML.

Event Attributes The <textarea> tag also supports the Event Attributes in HTML.

More Examples Example Disable default resize option:

<html> <head> <style> textarea { resize: none; } </style> </head> <body>

<label for="w3review">Review of W3Schools:</label>

<textarea id="w3review" name="w3review" rows="4" cols="50"> At w3schools.com you will learn how to make a website. They offer free tutorials in all web development technologies. </textarea>

</body> </html> Related Pages HTML DOM reference: Textarea Object

CSS Tutorial: Styling Forms

Default CSS Settings None.





<!DOCTYPE html> <html> <body>

<h1>The textarea element</h1>

<form action="/action_page.php"> <label for="w3review">Review of W3Schools:</label> <textarea id="w3review" name="w3review" rows="4" cols="50"> At w3schools.com you will learn how to make a website. They offer free tutorials in all web development technologies. </textarea> <br><br> <input type="submit" value="Submit"> </form>

<p>Click the "Submit" button and the form-data will be sent to a page on the server called "action_page.php".</p> </body> </html>

<!DOCTYPE html> <html> <head> <style> textarea { resize: none; } </style> </head> <body>

<h1>The textarea element - Disable default resize option</h1>

<label for="w3review">Review of W3Schools:</label>

<textarea id="w3review" name="w3review" rows="4" cols="50"> At w3schools.com you will learn how to make a website. They offer free tutorials in all web development technologies. </textarea>

</body> </html>
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HTML <tfoot> Tag

Example An HTML table with a <thead>, <tbody>, and a <tfoot> element:

<table> <thead> <tr> <th>Month</th> <th>Savings</th> </tr> </thead> <tbody> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$80</td> </tr> </tbody> <tfoot> <tr> <td>Sum</td> <td>$180</td> </tr> </tfoot> </table> More "Try it Yourself" examples below.

Definition and Usage The <tfoot> tag is used to group footer content in an HTML table.

The <tfoot> element is used in conjunction with the <thead> and <tbody> elements to specify each part of a table (footer, header, body).

Browsers can use these elements to enable scrolling of the table body independently of the header and footer. Also, when printing a large table that spans multiple pages, these elements can enable the table header and footer to be printed at the top and bottom of each page.

Note: The <tfoot> element must have one or more <tr> tags inside.

The <tfoot> tag must be used in the following context: As a child of a <table> element, after any <caption>, <colgroup>, <thead>, and <tbody> elements.

Tip: The <thead>, <tbody>, and <tfoot> elements will not affect the layout of the table by default. However, you can use CSS to style these elements (see example below)!

Browser Support Element
<tfoot> Yes Yes Yes Yes Yes Global Attributes The <tfoot> tag also supports the Global Attributes in HTML.

Event Attributes The <tfoot> tag also supports the Event Attributes in HTML.

More Examples Example Style <thead>, <tbody>, and <tfoot> with CSS:

<html> <head> <style> thead {color: green;} tbody {color: blue;} tfoot {color: red;}

table, th, td { border: 1px solid black; } </style> </head> <body>

<table> <thead> <tr> <th>Month</th> <th>Savings</th> </tr> </thead> <tbody> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$80</td> </tr> </tbody> <tfoot> <tr> <td>Sum</td> <td>$180</td> </tr> </tfoot> </table> Example How to align content inside <tfoot> (with CSS):

<table style="width:100%"> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$80</td> </tr> <tfoot style="text-align:center"> <tr> <td>Sum</td> <td>$180</td> </tr> </tfoot> </table> Example How to vertical align content inside <tfoot> (with CSS):

<table style="width:100%"> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$80</td> </tr> <tfoot style="vertical-align:bottom"> <tr style="height:100px"> <td>Sum</td> <td>$180</td> </tr> </tfoot> </table> Default CSS Settings Most browsers will display the <tfoot> element with the following default values:

tfoot { display: table-footer-group; vertical-align: middle; border-color: inherit; }




<!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid black; } </style> </head> <body>

<h1>The thead, tbody, and tfoot elements</h1>

<table> <thead> <tr> <th>Month</th> <th>Savings</th> </tr> </thead> <tbody> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$80</td> </tr> </tbody> <tfoot> <tr> <td>Sum</td> <td>$180</td> </tr> </tfoot> </table>

</body> </html>

<!DOCTYPE html> <html> <head> <style> thead {color:green;} tbody {color:blue;} tfoot {color:red;}

table, th, td { border: 1px solid black; } </style> </head> <body>

<h1>The thead, tbody, and tfoot elements - Styled with CSS</h1>

<table> <thead> <tr> <th>Month</th> <th>Savings</th> </tr> </thead> <tbody> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$80</td> </tr> </tbody> <tfoot> <tr> <td>Sum</td> <td>$180</td> </tr> </tfoot> </table>

</body> </html>

<!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid black; } </style> </head> <body>

<h1>Center-align content in tfoot</h1>

<table style="width:100%"> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$80</td> </tr> <tfoot style="text-align:center"> <tr> <td>Sum</td> <td>$180</td> </tr> </tfoot>
</table>

</body> </html>

<!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid black; } </style> </head> <body>

<h1>Vertical-align content in tfoot</h1>

<table style="width:50%"> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$80</td> </tr> <tfoot style="vertical-align:bottom"> <tr style="height:100px"> <td>Sum</td> <td>$180</td> </tr> </tfoot>
</table>

</body> </html>
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HTML <th> Tag

Example A simple HTML table with three rows, two header cells and four data cells:

<table> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$80</td> </tr> </table> More "Try it Yourself" examples below.

Definition and Usage The <th> tag defines a header cell in an HTML table.

An HTML table has two kinds of cells:

Header cells - contains header information (created with the <th> element) Data cells - contains data (created with the <td> element) The text in <th> elements are bold and centered by default.

The text in <td> elements are regular and left-aligned by default.

Browser Support Element
<th> Yes Yes Yes Yes Yes Attributes Attribute Value Description abbr text Specifies an abbreviated version of the content in a header cell colspan number Specifies the number of columns a header cell should span headers header_id Specifies one or more header cells a cell is related to rowspan number Specifies the number of rows a header cell should span scope col colgroup row rowgroup Specifies whether a header cell is a header for a column, row, or group of columns or rows Global Attributes The <th> tag also supports the Global Attributes in HTML.

Event Attributes The <th> tag also supports the Event Attributes in HTML.

More Examples Example How to align content inside <th> (with CSS):

<table style="width:100%"> <tr> <th style="text-align:left">Month</th> <th style="text-align:left">Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$80</td> </tr> </table> Example How to add background-color to table header cell (with CSS):

<table> <tr> <th style="background-color:#FF0000">Month</th> <th style="background-color:#00FF00">Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> </table> Example How to set the height of a table header cell (with CSS):

<table> <tr> <th style="height:100px">Month</th> <th style="height:100px">Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> </table> Example How to specify no word-wrapping in table header cell (with CSS):

<table> <tr> <th>Month</th> <th style="white-space:nowrap">My Savings for a new car</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> </table> Example How to vertical align content inside <th> (with CSS):

<table style="width:50%;"> <tr style="height:100px"> <th style="vertical-align:bottom">Month</th> <th style="vertical-align:bottom">Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> </table> Example How to set the width of a table header cell (with CSS):

<table style="width:100%"> <tr> <th style="width:70%">Month</th> <th style="width:30%">Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> </table> Example How to create table headers:

<table> <tr> <th>Name</th> <th>Email</th> <th>Phone</th> </tr> <tr> <td>John Doe</td> <td>john.doe@example.com</td> <td>123-45-678</td> </tr> </table> Example How to create a table with a caption:

<table> <caption>Monthly savings</caption> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$80</td> </tr> </table> Example How to define table cells that span more than one row or one column:

<table> <tr> <th>Name</th> <th>Email</th> <th colspan="2">Phone</th> </tr> <tr> <td>John Doe</td> <td>john.doe@example.com</td> <td>123-45-678</td> <td>212-00-546</td> </tr> </table> Related Pages HTML tutorial: HTML Tables

HTML DOM reference: TableHeader Object

CSS Tutorial: Styling Tables

Default CSS Settings Most browsers will display the <th> element with the following default values:

th { display: table-cell; vertical-align: inherit; font-weight: bold; text-align: center; }
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HTML <th> Tag

Example A simple HTML table with three rows, two header cells and four data cells:

<table> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$80</td> </tr> </table> More "Try it Yourself" examples below.

Definition and Usage The <th> tag defines a header cell in an HTML table.

An HTML table has two kinds of cells:

Header cells - contains header information (created with the <th> element) Data cells - contains data (created with the <td> element) The text in <th> elements are bold and centered by default.

The text in <td> elements are regular and left-aligned by default.

Browser Support Element
<th> Yes Yes Yes Yes Yes Attributes Attribute Value Description abbr text Specifies an abbreviated version of the content in a header cell colspan number Specifies the number of columns a header cell should span headers header_id Specifies one or more header cells a cell is related to rowspan number Specifies the number of rows a header cell should span scope col colgroup row rowgroup Specifies whether a header cell is a header for a column, row, or group of columns or rows Global Attributes The <th> tag also supports the Global Attributes in HTML.

Event Attributes The <th> tag also supports the Event Attributes in HTML.

More Examples Example How to align content inside <th> (with CSS):

<table style="width:100%"> <tr> <th style="text-align:left">Month</th> <th style="text-align:left">Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$80</td> </tr> </table> Example How to add background-color to table header cell (with CSS):

<table> <tr> <th style="background-color:#FF0000">Month</th> <th style="background-color:#00FF00">Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> </table> Example How to set the height of a table header cell (with CSS):

<table> <tr> <th style="height:100px">Month</th> <th style="height:100px">Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> </table> Example How to specify no word-wrapping in table header cell (with CSS):

<table> <tr> <th>Month</th> <th style="white-space:nowrap">My Savings for a new car</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> </table> Example How to vertical align content inside <th> (with CSS):

<table style="width:50%;"> <tr style="height:100px"> <th style="vertical-align:bottom">Month</th> <th style="vertical-align:bottom">Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> </table> Example How to set the width of a table header cell (with CSS):

<table style="width:100%"> <tr> <th style="width:70%">Month</th> <th style="width:30%">Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> </table> Example How to create table headers:

<table> <tr> <th>Name</th> <th>Email</th> <th>Phone</th> </tr> <tr> <td>John Doe</td> <td>john.doe@example.com</td> <td>123-45-678</td> </tr> </table> Example How to create a table with a caption:

<table> <caption>Monthly savings</caption> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$80</td> </tr> </table> Example How to define table cells that span more than one row or one column:

<table> <tr> <th>Name</th> <th>Email</th> <th colspan="2">Phone</th> </tr> <tr> <td>John Doe</td> <td>john.doe@example.com</td> <td>123-45-678</td> <td>212-00-546</td> </tr> </table> Related Pages HTML tutorial: HTML Tables

HTML DOM reference: TableHeader Object

CSS Tutorial: Styling Tables

Default CSS Settings Most browsers will display the <th> element with the following default values:

th { display: table-cell; vertical-align: inherit; font-weight: bold; text-align: center; }






<!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid black; }<!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid black; } </style> </head> <body>

<h1>Add a width i percent for ths</h1>

<table style="width:100%"> <tr> <th style="width:70%">Month</th> <th style="width:30%">Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$80</td> </tr> </table>

</body> </html>

</style> </head> <body>

<h1>Add a width i percent for ths</h1>

<table style="width:100%"> <tr> <th style="width:70%">Month</th> <th style="width:30%">Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$80</td> </tr> </table>

</body> </html>

<!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid black; } </style> </head> <body>

<h1>Table Headers</h1>

<h2>Horizontal headers:</h2> <table> <tr> <th>Name</th> <th>Email</th> <th>Phone</th>
</tr> <tr> <td>John Doe</td> <td>john.doe@example.com</td>
<td>123-45-678</td> </tr> </table>

<h2>Vertical headers:</h2> <table> <tr> <th>Name:</th> <td>John Doe</td> </tr> <tr> <th>Email:</th>
<td>john.doe@example.com</td>
</tr>
<tr> <th>Phone:</th> <td>123-45-678</td> </tr> </table>

</body> </html>

<!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid black; } </style> </head> <body>

<h1>The th element</h1>

<p>The th element defines a header cell in a table:</p>

<table> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$80</td> </tr> </table>

</body> </html>

<!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid black; } </style> </head> <body>

<h1>Left-align content in th</h1>

<table style="width:100%"> <tr> <th style="text-align:left">Month</th> <th style="text-align:left">Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$80</td> </tr> </table>

</body> </html>

<!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid black; } </style> </head> <body>

<h1>Add Background Color to th</h1>

<table> <tr> <th style="background-color:#FF0000">Month</th> <th style="background-color:#00FF00">Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> </table>

</body> </html>

<!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid black; } </style> </head> <body>

<h1>Add Specific Height to th</h1>

<table> <tr> <th style="height:100px">Month</th> <th style="height:100px">Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$80</td> </tr> </table>

</body> </html>

<!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid black; } </style> </head> <body>

<h1>Add Nowrap to th</h1>

<table> <tr> <th>Month</th> <th style="white-space:nowrap">My Savings for a new car (Hopefully I will get one in the future)</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$80</td> </tr> </table>

<p>Table without nowrap:</p> <table> <tr> <th>Month</th> <th>My Savings for a new car (Hopefully I will get one in the future)</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$80</td> </tr> </table>

<p><b>Note:</b> You might have to reduce the browser window to see the effect.</p>

</body> </html>

<!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid black; } </style> </head> <body>

<h1>Vertical-align content in th</h1>

<table style="width:50%;"> <tr style="height:100px"> <th style="vertical-align:bottom">Month</th> <th style="vertical-align:bottom">Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> </table>

</body> </html>

<!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid black; } </style> </head> <body>

<h1>The caption element</h1>

<table> <caption>Monthly savings</caption> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$50</td> </tr> </table>

</body> </html>

<!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid black; } </style> </head> <body>

<h1>Colspan and rowspan</h1>

<h3>Cell that spans two columns:</h3> <table> <tr> <th>Name</th> <th>Email</th> <th colspan="2">Phone</th>
</tr> <tr> <td>John Doe</td> <td>john.doe@example.com</td>
<td>123-45-678</td> <td>212-00-546</td>
</tr> </table>

<h3>Cell that spans two rows:</h3> <table> <tr> <th>Name:</th> <td>John Doe</td> </tr> <tr> <th>Email:</th>
<td>john.doe@example.com</td>
</tr>
<tr> <th rowspan="2">Phone:</th> <td>123-45-678</td> </tr> <tr> <td>212-00-546</td> </tr> </table>

</body> </html>
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HTML <thead> Tag

Example An HTML table with a <thead>, <tbody>, and a <tfoot> element:

<table> <thead> <tr> <th>Month</th> <th>Savings</th> </tr> </thead> <tbody> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$80</td> </tr> </tbody> <tfoot> <tr> <td>Sum</td> <td>$180</td> </tr> </tfoot> </table> More "Try it Yourself" examples below.

Definition and Usage The <thead> tag is used to group header content in an HTML table.

The <thead> element is used in conjunction with the <tbody> and <tfoot> elements to specify each part of a table (header, body, footer).

Browsers can use these elements to enable scrolling of the table body independently of the header and footer. Also, when printing a large table that spans multiple pages, these elements can enable the table header and footer to be printed at the top and bottom of each page.

Note: The <thead> element must have one or more <tr> tags inside.

The <thead> tag must be used in the following context: As a child of a <table> element, after any <caption> and <colgroup> elements, and before any <tbody>, <tfoot>, and <tr> elements.

Tip: The <thead>, <tbody>, and <tfoot> elements will not affect the layout of the table by default. However, you can use CSS to style these elements (see example below)!

Browser Support Element
<thead> Yes Yes Yes Yes Yes Global Attributes The <thead> tag also supports the Global Attributes in HTML.

Event Attributes The <thead> tag also supports the Event Attributes in HTML.

More Examples Example Style <thead>, <tbody>, and <tfoot> with CSS:

<html> <head> <style> thead {color: green;} tbody {color: blue;} tfoot {color: red;}

table, th, td { border: 1px solid black; } </style> </head> <body>

<table> <thead> <tr> <th>Month</th> <th>Savings</th> </tr> </thead> <tbody> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$80</td> </tr> </tbody> <tfoot> <tr> <td>Sum</td> <td>$180</td> </tr> </tfoot> </table> Example How to align content inside <thead> (with CSS):

<table style="width:100%"> <thead style="text-align:left"> <tr> <th>Month</th> <th>Savings</th> </tr> </thead> <tbody> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$80</td> </tr> </tbody> </table> Example How to vertical align content inside <thead> (with CSS):

<table style="width:50%;"> <thead style="vertical-align:bottom"> <tr style="height:100px"> <th>Month</th> <th>Savings</th> </tr> </thead> <tbody> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$80</td> </tr> </tbody> </table> Default CSS Settings Most browsers will display the <thead> element with the following default values:

thead { display: table-header-group; vertical-align: middle; border-color: inherit; }






<!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid black; } </style> </head> <body>

<h1>The thead, tbody, and tfoot elements</h1>

<table> <thead> <tr> <th>Month</th> <th>Savings</th> </tr> </thead> <tbody> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$80</td> </tr> </tbody> <tfoot> <tr> <td>Sum</td> <td>$180</td> </tr> </tfoot> </table>

</body> </html>

<!DOCTYPE html> <html> <head> <style> thead {color:green;} tbody {color:blue;} tfoot {color:red;}

table, th, td { border: 1px solid black; } </style> </head> <body>

<h1>The thead, tbody, and tfoot elements - Styled with CSS</h1>

<table> <thead> <tr> <th>Month</th> <th>Savings</th> </tr> </thead> <tbody> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$80</td> </tr> </tbody> <tfoot> <tr> <td>Sum</td> <td>$180</td> </tr> </tfoot> </table>

</body> </html>

<!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid black; } </style> </head> <body>

<h1>Left-align content in thead</h1>

<table style="width:100%"> <thead style="text-align:left"> <tr> <th>Month</th> <th>Savings</th> </tr> </thead>   <tbody>     <tr>       <td>January</td>       <td>$100</td>     </tr>     <tr>       <td>February</td>       <td>$80</td>     </tr>   </tbody> </table>

</body> </html>

<!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid black; } </style> </head> <body>

<h1>Vertical-align content in thead</h1>

<table style="width:50%"> <thead style="vertical-align:bottom"> <tr style="height:100px"> <th>Month</th> <th>Savings</th> </tr> </thead>   <tbody>     <tr>       <td>January</td>       <td>$100</td>     </tr>     <tr>       <td>February</td>       <td>$80</td>     </tr>   </tbody> </table>

</body> </html>
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HTML <time> Tag

Example How to define a time and a date:

<p>Open from <time>10:00</time> to <time>21:00</time> every weekday.</p>

<p>I have a date on <time datetime="2008-02-14 20:00">Valentines day</time>.</p> Definition and Usage The <time> tag defines a specific time (or datetime).

The datetime attribute of this element is used translate the time into a machine-readable format so that browsers can offer to add date reminders through the user's calendar, and search engines can produce smarter search results.

Browser Support The numbers in the table specify the first browser version that fully supports the element.

Element
<time> 62.0 18.0 22.0 7.0 49.0 Attributes Attribute Value Description datetime datetime Represent a machine-readable format of the <time> element Global Attributes The <time> tag also supports the Global Attributes in HTML.

Event Attributes The <time> tag also supports the Event Attributes in HTML.

Related Pages HTML DOM reference: Time Object

Default CSS Settings None.





<!DOCTYPE html> <html> <body>

<h1>The time element</h1>

<p>Open from <time>10:00</time> to <time>21:00</time> every weekday.</p>

<p>I have a date on <time datetime="2008-02-14 20:00">Valentines day</time>.</p>

<p><b>Note:</b> The time element does not render as anything special in any of the major browsers.</p>

</body> </html>
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HTML <title> Tag

Example Define a title for your HTML document:

<!DOCTYPE html> <html> <head> <title>HTML Elements Reference</title> </head> <body>

<h1>This is a heading</h1> <p>This is a paragraph.</p>

</body> </html> Definition and Usage The <title> tag defines the title of the document. The title must be text-only, and it is shown in the browser's title bar or in the page's tab.

The <title> tag is required in HTML documents!

The contents of a page title is very important for search engine optimization (SEO)! The page title is used by search engine algorithms to decide the order when listing pages in search results.

The <title> element:

defines a title in the browser toolbar provides a title for the page when it is added to favorites displays a title for the page in search-engine results Here are some tips for creating good titles:

Go for a longer, descriptive title (avoid one- or two-word titles) Search engines will display about 50-60 characters of the title, so try not to have titles longer than that Do not use just a list of words as the title (this may reduce the page's position in search results) So, try to make the title as accurate and meaningful as possible!

Note: You can NOT have more than one <title> element in an HTML document.

Browser Support Element
<title> Yes Yes Yes Yes Yes Global Attributes The <title> tag also supports the Global Attributes in HTML.

Related Pages HTML tutorial: HTML Head

HTML DOM reference: Title Object

Default CSS Settings Most browsers will display the <title> element with the following default values:

title { display: none; }





<!DOCTYPE html> <html lang="en"> <head> <title>HTML Elements Reference</title> </head> <body>

<h1>This is a heading</h1> <p>This is a paragraph.</p>

</body> </html>
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HTML <tr> Tag

Example A simple HTML table with three rows; one header row and two data rows:

<table> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$80</td> </tr> </table> More "Try it Yourself" examples below.

Definition and Usage The <tr> tag defines a row in an HTML table.

A <tr> element contains one or more <th> or <td> elements.

Browser Support Element
<tr> Yes Yes Yes Yes Yes Global Attributes The <tr> tag also supports the Global Attributes in HTML.

Event Attributes The <tr> tag also supports the Event Attributes in HTML.

More Examples Example How to align content inside <tr> (with CSS):

<table style="width:100%"> <tr> <th>Month</th> <th>Savings</th> </tr> <tr style="text-align:right"> <td>January</td> <td>$100</td> </tr> </table> Example How to add background-color to a table row (with CSS):

<table> <tr style="background-color:#FF0000"> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> </table> Example How to vertical align content inside <tr> (with CSS):

<table style="height:200px"> <tr style="vertical-align:top"> <th>Month</th> <th>Savings</th> </tr> <tr style="vertical-align:bottom"> <td>January</td> <td>$100</td> </tr> </table> Example How to create table headers:

<table> <tr> <th>Name</th> <th>Email</th> <th>Phone</th> </tr> <tr> <td>John Doe</td> <td>john.doe@example.com</td> <td>123-45-678</td> </tr> </table> Example How to create a table with a caption:

<table> <caption>Monthly savings</caption> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$80</td> </tr> </table> Example How to define table cells that span more than one row or one column:

<table> <tr> <th>Name</th> <th>Email</th> <th colspan="2">Phone</th> </tr> <tr> <td>John Doe</td> <td>john.doe@example.com</td> <td>123-45-678</td> <td>212-00-546</td> </tr> </table> Related Pages HTML tutorial: HTML Tables

HTML DOM reference: TableRow object

CSS Tutorial: Styling Tables

Default CSS Settings Most browsers will display the <tr> element with the following default values:

tr { display: table-row; vertical-align: inherit; border-color: inherit; }






<!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid black; } </style> </head> <body>

<h1>The tr element</h1>

<p>The tr element defines a row in a table:</p>

<table> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$80</td> </tr> </table>

</body> </html>

<!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid black; } </style> </head> <body>

<h1>Right-align content in second table row</h1>

<table style="width:100%"> <tr> <th>Month</th> <th>Savings</th> </tr> <tr style="text-align:right"> <td>January</td> <td>$100</td> </tr> </table>

</body> </html>

<!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid black; } </style> </head> <body>

<h1>Add background color to first table row</h1>

<table> <tr style="background-color:#FF0000"> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> </table>

</body> </html>

<!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid black; } </style> </head> <body>

<h1>Vertical align content in table rows</h1>

<table style="height:200px"> <tr style="vertical-align:top"> <th>Month</th> <th>Savings</th> </tr> <tr style="vertical-align:bottom"> <td>January</td> <td>$100</td> </tr> </table>

</body> </html>

<!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid black; } </style> </head> <body>

<h1>Table Headers</h1>

<h2>Horizontal headers:</h2> <table> <tr> <th>Name</th> <th>Email</th> <th>Phone</th>
</tr> <tr> <td>John Doe</td> <td>john.doe@example.com</td>
<td>123-45-678</td> </tr> </table>

<h2>Vertical headers:</h2> <table> <tr> <th>Name:</th> <td>John Doe</td> </tr> <tr> <th>Email:</th>
<td>john.doe@example.com</td>
</tr>
<tr> <th>Phone:</th> <td>123-45-678</td> </tr> </table>

</body> </html>

<!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid black; } </style> </head> <body>

<h1>The caption element</h1>

<table> <caption>Monthly savings</caption> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$50</td> </tr> </table>

</body> </html>

<!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid black; } </style> </head> <body>

<h1>Colspan and rowspan</h1>

<h3>Cell that spans two columns:</h3> <table> <tr> <th>Name</th> <th>Email</th> <th colspan="2">Phone</th>
</tr> <tr> <td>John Doe</td> <td>john.doe@example.com</td>
<td>123-45-678</td> <td>212-00-546</td>
</tr> </table>

<h3>Cell that spans two rows:</h3> <table> <tr> <th>Name:</th> <td>John Doe</td> </tr> <tr> <th>Email:</th>
<td>john.doe@example.com</td>
</tr>
<tr> <th rowspan="2">Phone:</th> <td>123-45-678</td> </tr> <tr> <td>212-00-546</td> </tr> </table>

</body> </html>
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HTML <track> Tag

Example A video with subtitle tracks for two languages:

<video width="320" height="240" controls> <source src="forrestgump.mp4" type="video/mp4"> <source src="forrestgump.ogg" type="video/ogg"> <track src="fgsubtitlesen.vtt" kind="subtitles" srclang="en" label="English"> <track src="fgsubtitlesno.vtt" kind="subtitles" srclang="no" label="Norwegian"> </video> Definition and Usage The <track> tag specifies text tracks for <audio> or <video> elements.

This element is used to specify subtitles, caption files or other files containing text, that should be visible when the media is playing.

Tracks are formatted in WebVTT format (.vtt files).

Browser Support The numbers in the table specify the first browser version that fully supports the element.

Element
<track> 23.0 10.0 31.0 6.0 12.1 Optional Attributes Attribute Value Description default default Specifies that the track is to be enabled if the user's preferences do not indicate that another track would be more appropriate kind captions chapters descriptions metadata subtitles Specifies the kind of text track label text Specifies the title of the text track src URL Required. Specifies the URL of the track file srclang language_code Specifies the language of the track text data (required if kind="subtitles") Global Attributes The <track> tag also supports the Global Attributes in HTML.

Event Attributes The <track> tag also supports the Event Attributes in HTML.

Related Pages HTML tutorial: HTML Video

HTML tutorial: HTML Audio

HTML DOM reference: Track Object

Default CSS Settings None.
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HTML <tt> Tag Not Supported in HTML5. The <tt> tag was used in HTML 4 to define teletype text.

What to Use Instead? Consider the <kbd> element (for keyboard input), the <var> element (for variables), the <code> element (for computer code), the <samp> element (for computer output), or use CSS instead.

Example Define a teletype/monospace font for a <p> element (with CSS):

<p style="font-family:'Lucida Console', monospace">This text is monospace text.</p> In our CSS tutorial you can find more details about specifying the type of font in a document.





<!DOCTYPE html> <html> <body>

<p>This text is normal.</p> <p style="font-family:'Lucida Console', monospace">This text is monospace text.</p>

</body> </html>
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HTML <u> Tag

Example Mark up a misspelled word with the <u> tag:

<p>This is some <u>mispeled</u> text.</p> More "Try it Yourself" examples below.

Definition and Usage The <u> tag represents some text that is unarticulated and styled differently from normal text, such as misspelled words or proper names in Chinese text. The content inside is typically displayed with an underline. You can change this with CSS (see example below).

Tip: Avoid using the <u> element where it could be confused for a hyperlink!

Browser Support Element
<u> Yes Yes Yes Yes Yes Global Attributes The <u> tag also supports the Global Attributes in HTML.

Event Attributes The <u> tag also supports the Event Attributes in HTML.

More Examples Example Use CSS to style misspelled text:

<html> <head> <style> .spelling-error { text-decoration-line: underline; text-decoration-style: wavy; text-decoration-color: red; } </style> </head> <body>

<p>This is some <u class="spelling-error">mispeled</u> text.</p>

</body> </html> Related Pages HTML tutorial: HTML Text Formatting

HTML DOM reference: Underline Object

Default CSS Settings Most browsers will display the <u> element with the following default values:

Example u { text-decoration: underline; }






<!DOCTYPE html> <html> <body>

<h1>The u element</h1>

<p>This is some <u>mispeled</u> text.</p>

</body> </html>

<!DOCTYPE html> <html> <head> <style> .spelling-error { text-decoration-line: underline; text-decoration-style: wavy; text-decoration-color: red; } </style> </head> <body>

<h1>The u element + CSS</h1>

<p>This is some <u class="spelling-error">mispeled</u> text.</p>

</body> </html>

<!DOCTYPE html> <html> <head> <style> u { text-decoration: underline; } </style> </head> <body>

<p>A u element is displayed like this:</p>

<u>Some underlined text</u>

<p>Change the default CSS settings to see the effect.</p>

</body> </html>
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HTML <ul> Tag

Example An unordered HTML list:

<ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> More "Try it Yourself" examples below.

Definition and Usage The <ul> tag defines an unordered (bulleted) list.

Use the <ul> tag together with the <li> tag to create unordered lists.

Tip: Use CSS to style lists.

Tip: For ordered lists, use the <ol> tag.

Browser Support Element
<ul> Yes Yes Yes Yes Yes Global Attributes The <ul> tag also supports the Global Attributes in HTML.

Event Attributes The <ul> tag also supports the Event Attributes in HTML.

More Examples Example Set the different list style types (with CSS):

<ul style="list-style-type:circle"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul>

<ul style="list-style-type:disc"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul>

<ul style="list-style-type:square"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> Example Expand and reduce line-height in lists (with CSS):

<ul style="line-height:180%"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul>

<ul style="line-height:80%"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> Example Create a list inside a list (a nested list):

<ul> <li>Coffee</li> <li>Tea <ul> <li>Black tea</li> <li>Green tea</li> </ul> </li> <li>Milk</li> </ul> Example Create a more complex nested list:

<ul> <li>Coffee</li> <li>Tea <ul> <li>Black tea</li> <li>Green tea <ul> <li>China</li> <li>Africa</li> </ul> </li> </ul> </li> <li>Milk</li> </ul> Related Pages HTML tutorial: HTML Lists

HTML DOM reference: Ul Object

CSS Tutorial: Styling Lists

Default CSS Settings Most browsers will display the <ul> element with the following default values:

Example ul { display: block; list-style-type: disc; margin-top: 1em; margin-bottom: 1 em; margin-left: 0; margin-right: 0; padding-left: 40px; }






<!DOCTYPE html> <html> <body>

<h1>The ul element</h1>

<ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul>

</body> </html>

<!DOCTYPE html> <html> <body>

<h1>All the different list types for ul with CSS</h1>

<ul style="list-style-type:circle"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul>

<ul style="list-style-type:disc"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul>

<ul style="list-style-type:square"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul>

</body> </html>

<!DOCTYPE html> <html> <body>

<h1>Modify lineheight of lists with CSS</h1>

<p>Expand line height in a list:</p> <ul style="line-height:180%"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul>

<p>Reduce line height in a list:</p> <ul style="line-height:80%"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul>

</body> </html>

<!DOCTYPE html> <html> <body>

<h1>A list inside another list</h1>

<ul> <li>Coffee</li> <li>Tea <ul> <li>Black tea</li> <li>Green tea</li> </ul> </li> <li>Milk</li> </ul>

</body> </html>

<!DOCTYPE html> <html> <body>

<h1>A list in a list in a list</h1>

<ul> <li>Coffee</li> <li>Tea <ul> <li>Black tea</li> <li>Green tea <ul> <li>China</li> <li>Africa</li> </ul> </li> </ul> </li> <li>Milk</li> </ul>

</body> </html>

<!DOCTYPE html> <html> <head> <style> ul { display: block; list-style-type: disc; margin-top: 1em; margin-bottom: 1 em; margin-left: 0; margin-right: 0; padding-left: 40px; } </style> </head> <body>

<p>A ul element is displayed like this:</p>

<ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul>

<p>Change the default CSS settings to see the effect.</p>

</body> </html>
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HTML <var> Tag

Example Define some text as variables in a document:

<p>The area of a triangle is: 1/2 x <var>b</var> x <var>h</var>, where <var>b</var> is the base, and <var>h</var> is the vertical height.</p> Definition and Usage The <var> tag is used to defines a variable in programming or in a mathematical expression. The content inside is typically displayed in italic.

Tip: This tag is not deprecated. However, it is possible to achieve richer effect by using CSS.

Also look at:

Tag Description <code> Defines a piece of computer code <samp> Defines sample output from a computer program <kbd> Defines keyboard input <pre> Defines preformatted text Browser Support Element
<var> Yes Yes Yes Yes Yes

Global Attributes The <var> tag also supports the Global Attributes in HTML.

Event Attributes The <var> tag also supports the Event Attributes in HTML.

Related Pages HTML tutorial: HTML Text Formatting

HTML DOM reference: Variable Object

Default CSS Settings Most browsers will display the <var> element with the following default values:

Example var { font-style: italic; }




<!DOCTYPE html> <html> <body>

<h1>The var element</h1>

<p>The area of a triangle is: 1/2 x <var>b</var> x <var>h</var>, where <var>b</var> is the base, and <var>h</var> is the vertical height.</p>

</body> </html>

<!DOCTYPE html> <html> <head> <style> var { font-style: italic; } </style> </head> <body>

<p>A var element is displayed like this:</p>

<var>Variable</var>

<p>Change the default CSS settings to see the effect.</p>

</body> </html>
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HTML <video> Tag

Example Play a video:

<video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> Your browser does not support the video tag. </video> Definition and Usage The <video> tag is used to embed video content in a document, such as a movie clip or other video streams.

The <video> tag contains one or more <source> tags with different video sources. The browser will choose the first source it supports.

The text between the <video> and </video> tags will only be displayed in browsers that do not support the <video> element.

There are three supported video formats in HTML: MP4, WebM, and OGG.

Browser MP4 WebM Ogg Edge YES YES YES Chrome YES YES YES Firefox YES YES YES Safari YES YES NO Opera YES YES YES Tips and Notes Tip: For audio files, look at the <audio> tag.

Browser Support The numbers in the table specify the first browser version that fully supports the element.

Element
<video> 4.0 9.0 3.5 3.1 11.5 Optional Attributes Attribute Value Description autoplay autoplay Specifies that the video will start playing as soon as it is ready controls controls Specifies that video controls should be displayed (such as a play/pause button etc). height pixels Sets the height of the video player loop loop Specifies that the video will start over again, every time it is finished muted muted Specifies that the audio output of the video should be muted poster URL Specifies an image to be shown while the video is downloading, or until the user hits the play button preload auto metadata none Specifies if and how the author thinks the video should be loaded when the page loads src URL Specifies the URL of the video file width pixels Sets the width of the video player Global Attributes The <video> tag also supports the Global Attributes in HTML.

Event Attributes The <video> tag also supports the Event Attributes in HTML.

Related Pages HTML DOM reference: HTML Audio/Video DOM Reference

Default CSS Settings None.





<!DOCTYPE html> <html> <body>

<h1>The video element</h1>

<video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> Your browser does not support the video tag. </video>

</body> </html>
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HTML <wbr> Tag

Example A text with word break opportunities:

<p>To learn AJAX, you must be familiar with the XML<wbr>Http<wbr>Request Object.</p> Definition and Usage The <wbr> (Word Break Opportunity) tag specifies where in a text it would be ok to add a line-break.

Tip: When a word is too long, the browser might break it at the wrong place. You can use the <wbr> element to add word break opportunities.

Browser Support The numbers in the table specify the first browser version that fully supports the element.

Element
<wbr> 1.0 12.0 3.0 4.0 11.7 Global Attributes The <wbr> tag also supports the Global Attributes in HTML.

Event Attributes The <wbr> tag also supports the Event Attributes in HTML.




<!DOCTYPE html> <html> <body>

<h1>The wbr element</h1>

<p>Try to shrink the browser window, to view how the very long word in the paragraph below will break:</p>

<p>This is a veryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryvery<wbr>longwordthatwillbreakatspecific<wbr>placeswhenthebrowserwindowisresized.</p>

<p><b>Note:</b> The wbr element is not supported in Internet Explorer 11 (or earlier).</p>

</body> </html>




qqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqq




https://www.w3schools.com/tags/tag_comment.asp







HTML <!--…--> Tag

Example An HTML comment:

<!--This is a comment. Comments are not displayed in the browser-->

<p>This is a paragraph.</p> Definition and Usage The comment tag is used to insert comments in the source code. Comments are not displayed in the browsers.

You can use comments to explain your code, which can help you when you edit the source code at a later date. This is especially useful if you have a lot of code.

Browser Support Element
<!--…--> Yes Yes Yes Yes Yes Tips and Notes You can use the comment tag to "hide" scripts from browsers without support for scripts (so they don't show them as plain text):

<script type="text/javascript"> <!-- function displayMsg() { alert("Hello World!") } //--> </script> Note: The two forward slashes at the end of comment line (//) is the JavaScript comment symbol. This prevents JavaScript from executing the --> tag.

Standard Attributes The comment tag does not support any standard attributes.

More information about Standard Attributes.

Event Attributes The comment tag does not support any event attributes.

More information about Event Attributes.




<!DOCTYPE html> <html> <body>

<!-- This is a comment --> <p>This is a paragraph.</p> <!-- Comments are not displayed in the browser -->

</body> </html>
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fin de tout html



